echarts动态添加数据

数据异步加载

EChart中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

绑定数据的方式有两种，一种是写写好一些图表参数，然后数据留空，然后在异步读取数据的时候，绑定数据。还有一种就是直接异步读取数据的时候同时设置图表参数和数据绑定。

准备要加载的数据文件data.json假数据实际项目中数据是由后台传递过来的，数据内容：

{
	"name":["iso","english","china","ufo","seo"],
	"data":[400,200,300,100,11]
}

　　

第一种异步加载的时候设置图表参数和绑定数据，JavaScript中的代码如下：

var container = document.getElementById('container');
		// 初始化echarts对象
		var myContainer = echarts.init(container);
$.get('echarts.json', function(data) {//与服务器连接成功
			console.log(data);//获取到的json数据是个对象
			myContainer.setOption(option = {
				title:{
                    text:'ECharts 异步加载数据'
                },
                tooltip:{},
                legend:{
                    data:['访问量']
                },
                 xAxis:{
                    data:data.name
                },
                yAxis:{},
                series:[
                	{
                		name:'访问量',
                		type:'line',
                		data:data.data
                	}
                ]
			});
		});

　　

运行结果为

第二种先设置图表参数，后绑定数据。  JavaScript中的代码如下：

// 初始化echarts对象
var myContainer = echarts.init(document.getElementById('container'));
 myContainer.setOption(option = {
			title:{
				text:'echarts异步加载数据'
			},
			tooltip:{},
			legend:{},
			xAxis:{
				data:[]
			},
			yAxis:{},
			series:[
				{
					name:'访问量',
					type:'bar',
					data:[]
				}
			]
		});
		$.get('echarts.json',function(res){
			// console.log(res);
			myContainer.setOption({
				xAxis:{
					data:res.name
				},
				series:[{
						data:res.data
					}
				]
			});
		});

　　

运行结果为：

Loading动画加载

//打开loading动画
        myContainer.showLoading();
        //加载数据函数
        function bindData(){
            //为了效果明显，我们做了延迟读取数据
            setTimeout(function(){
                //异步加载数据
               $.get('echarts.json',function(res){
               	//获取数据后，隐藏loading动画
               		myContainer.hideLoading();
               		myContainer.setOption(option = {
               			title:{
               				text:'echartsLoading加载'
               			},
               			tooltip:{},
               			legend:{},
               			xAxis:{
               				data:res.name
               			},
               			yAxis:{},
               			series:[
               				{
               					name:'访问量',
               					type:'bar',
               					data:res.data
               				}
               			]
               		});
               })
            },2000)
        }

        bindData();

由于运行的动态图上传有点麻烦，在这里我截图两张图片，分别是加载前与加载后:

加载后图片：

数据动态实时更新

数据实时更新的代码：

    var container = document.getElementById('container');
    // 初始化echarts对象
    var myContainer = echarts.init(container);
    var base = + new Date(2018,9,30);
    var oneDay = 24*3600*1000;
    var date = [];
    var data = [Math.random()*150];
    var now = new Date(base);
    var day = 30;
    function addData(shift){
        now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join('/');
        date.push(now);
        data.push((Math.random()-0.5)*10+data[data.length-1]);
        if (shift) {
            console.log(data);
            date.shift();
            data.shift();
        }
        now = new Date(+new Date(now)+oneDay);
    }

    for (var i = 0; i < day; i++) {
        addData();
    }
    //设置图标配置项
    myContainer.setOption({
        title:{
            text:'ECharts 30天内数据实时更新'
        },
        xAxis:{
            type:"category",
            boundaryGap:false,
            data:date
        },
        yAxis:{
            boundaryGap:[0,'100%'],
            type:'value'
        },
        series:[{
            name:'成交',
            type:'line',
            smooth:true, //数据光滑过度
            symbol:'none', //下一个数据点
            stack:'a',
            areaStyle:{
                normal:{
                    color:'pink'
                }
            },
            data:data
        }]
    })
    setInterval(function(){
        addData(true);
        myContainer.setOption({
            xAxis:{
                data:date
            },
            series:[{
                name:'成交',
                data:data
            }]
        });
    },1000)

　　

运行图

改代码是上面数据加载方式的所有页面代码，可以直接复制，编辑查看运行效果。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>echarts-异步加载数据</title>
     <link rel="stylesheet" href="11.scss">
     <script type="text/javascript" src="js/echarts.js"></script>
     <script type="text/javascript" src="js/echarts.min.js"></script>
     <script type="text/javascript" src="jquery.min.js"></script>
     <style>
             #container{
                 width: 500px;
                 height: 400px;
                 border: 1px solid #ccc;
                 /*background-color: #ccc;*/
             }
     </style>
 </head>
 <body>
     <div id="container"></div>
     <!--  -->
     <script type="text/javascript">
         var container = document.getElementById('container');
         // 初始化echarts对象
         var myContainer = echarts.init(container);

     // 第一种异步加载的时候设置图表参数和绑定数据
         // 异步加载配置项与数据显示图表
         /*$.get('echarts.json', function(data) {//与服务器连接成功
             console.log(data);//获取到的json数据是个对象
             myContainer.setOption(option = {
                 title:{
                     text:'ECharts 异步加载数据'
                 },
                 tooltip:{},
                 legend:{
                     data:['访问量']
                 },
                  xAxis:{
                     data:data.name
                 },
                 yAxis:{},
                 series:[
                     {
                         name:'访问量',
                         type:'line',
                         data:data.data
                     }
                 ]
             });
         });*/

     // 第二种先设置图表参数，后绑定数据
         /*myContainer.setOption(option = {
             title:{
                 text:'echarts异步加载数据'
             },
             tooltip:{},
             legend:{},
             xAxis:{
                 data:[]
             },
             yAxis:{},
             series:[
                 {
                     name:'访问量',
                     type:'bar',
                     data:[]
                 }
             ]
         });
         $.get('echarts.json',function(res){
             // console.log(res);
             myContainer.setOption({
                 xAxis:{
                     data:res.name
                 },
                 series:[{
                         data:res.data
                     }
                 ]
             });
         });*/
         /* //打开loading动画
         myContainer.showLoading();
         //加载数据函数
         function bindData(){
             //为了效果明显，我们做了延迟读取数据
             setTimeout(function(){
                 //异步加载数据
                $.get('echarts.json',function(res){
                    //获取数据后，隐藏loading动画
                        myContainer.hideLoading();
                        myContainer.setOption(option = {
                            title:{
                                text:'echartsLoading加载'
                            },
                            tooltip:{},
                            legend:{},
                            xAxis:{
                                data:res.name
                            },
                            yAxis:{},
                            series:[
                                {
                                    name:'访问量',
                                    type:'bar',
                                    data:res.data
                                }
                            ]
                        });
                })
             },2000)
         }

         bindData();  */  

     //初始化echarts实例
     var base = + new Date(2017,3,8);
     var oneDay = 24*3600*1000;
     var date = [];
     var data = [Math.random()*150];
     var now = new Date(base);
     var day = 30;
     function addData(shift){
         now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join('/');
         date.push(now);
         data.push((Math.random()-0.5)*10+data[data.length-1]);
         if (shift) {
             console.log(data);
             date.shift();
             data.shift();
         }
         now = new Date(+new Date(now)+oneDay);
     }

     for (var i = 0; i < day; i++) {
         addData();
     }
     //设置图标配置项
     myContainer.setOption({
         title:{
             text:'ECharts 30天内数据实时更新'
         },
         xAxis:{
             type:"category",
             boundaryGap:false,
             data:date
         },
         yAxis:{
             boundaryGap:[0,'100%'],
             type:'value'
         },
         series:[{
             name:'成交',
             type:'line',
             smooth:true, //数据光滑过度
             symbol:'none', //下一个数据点
             stack:'a',
             areaStyle:{
                 normal:{
                     color:'red'
                 }
             },
             data:data
         }]
     })
     setInterval(function(){
         addData(true);
         myContainer.setOption({
             xAxis:{
                 data:date
             },
             series:[{
                 name:'成交',
                 data:data
             }]
         });
     },1000)
     </script>
 </body>
 </html>