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)

运行图

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

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>echarts-异步加载数据</title>
  6     <link rel="stylesheet" href="11.scss">
  7     <script type="text/javascript" src="js/echarts.js"></script>
  8     <script type="text/javascript" src="js/echarts.min.js"></script>
  9     <script type="text/javascript" src="jquery.min.js"></script>
 10     <style>
 11             #container{
 12                 width: 500px;
 13                 height: 400px;
 14                 border: 1px solid #ccc;
 15                 /*background-color: #ccc;*/
 16             }
 17     </style>
 18 </head>
 19 <body>
 20     <div id="container"></div>
 21     <!--  -->
 22     <script type="text/javascript">
 23         var container = document.getElementById('container');
 24         // 初始化echarts对象
 25         var myContainer = echarts.init(container);
 26 
 27     // 第一种异步加载的时候设置图表参数和绑定数据
 28         // 异步加载配置项与数据显示图表
 29         /*$.get('echarts.json', function(data) {//与服务器连接成功
 30             console.log(data);//获取到的json数据是个对象
 31             myContainer.setOption(option = {
 32                 title:{
 33                     text:'ECharts 异步加载数据'
 34                 },
 35                 tooltip:{},
 36                 legend:{
 37                     data:['访问量']
 38                 },
 39                  xAxis:{
 40                     data:data.name
 41                 },
 42                 yAxis:{},
 43                 series:[
 44                     {
 45                         name:'访问量',
 46                         type:'line',
 47                         data:data.data
 48                     }
 49                 ]
 50             });
 51         });*/
 52          
 53     // 第二种先设置图表参数，后绑定数据
 54         /*myContainer.setOption(option = {
 55             title:{
 56                 text:'echarts异步加载数据'
 57             },
 58             tooltip:{},
 59             legend:{},
 60             xAxis:{
 61                 data:[]
 62             },
 63             yAxis:{},
 64             series:[
 65                 {
 66                     name:'访问量',
 67                     type:'bar',
 68                     data:[]
 69                 }
 70             ]
 71         });
 72         $.get('echarts.json',function(res){
 73             // console.log(res);
 74             myContainer.setOption({
 75                 xAxis:{
 76                     data:res.name
 77                 },
 78                 series:[{
 79                         data:res.data
 80                     }
 81                 ]
 82             });
 83         });*/
 84         /* //打开loading动画
 85         myContainer.showLoading();
 86         //加载数据函数
 87         function bindData(){
 88             //为了效果明显，我们做了延迟读取数据
 89             setTimeout(function(){                
 90                 //异步加载数据
 91                $.get('echarts.json',function(res){
 92                    //获取数据后，隐藏loading动画
 93                        myContainer.hideLoading();
 94                        myContainer.setOption(option = {
 95                            title:{
 96                                text:'echartsLoading加载'
 97                            },
 98                            tooltip:{},
 99                            legend:{},
100                            xAxis:{
101                                data:res.name
102                            },
103                            yAxis:{},
104                            series:[
105                                {
106                                    name:'访问量',
107                                    type:'bar',
108                                    data:res.data
109                                }
110                            ]
111                        });
112                })
113             },2000)
114         }
115         
116         bindData();  */  
117 
118     //初始化echarts实例
119     var base = + new Date(2017,3,8);
120     var oneDay = 24*3600*1000;
121     var date = [];
122     var data = [Math.random()*150];
123     var now = new Date(base);
124     var day = 30;
125     function addData(shift){
126         now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join('/');        
127         date.push(now);        
128         data.push((Math.random()-0.5)*10+data[data.length-1]);
129         if (shift) {
130             console.log(data);
131             date.shift();
132             data.shift();
133         }
134         now = new Date(+new Date(now)+oneDay);        
135     }
136 
137     for (var i = 0; i < day; i++) {
138         addData();
139     }
140     //设置图标配置项
141     myContainer.setOption({
142         title:{
143             text:'ECharts 30天内数据实时更新'
144         },
145         xAxis:{
146             type:"category",
147             boundaryGap:false,
148             data:date
149         },
150         yAxis:{
151             boundaryGap:[0,'100%'],
152             type:'value'
153         },
154         series:[{
155             name:'成交',
156             type:'line',
157             smooth:true, //数据光滑过度
158             symbol:'none', //下一个数据点
159             stack:'a',
160             areaStyle:{
161                 normal:{
162                     color:'red'
163                 }
164             },
165             data:data
166         }]
167     })
168     setInterval(function(){
169         addData(true);
170         myContainer.setOption({
171             xAxis:{
172                 data:date
173             },
174             series:[{
175                 name:'成交',
176                 data:data
177             }]
178         });
179     },1000)
180     </script>
181 </body>
182 </html>