echarts動態添加數據

時間 2019-11-25

標籤 echarts 動態添加數據简体版

原文原文鏈接

數據異步加載

EChart中實現異步數據的更新很是簡單，在圖表初始化後無論任什麼時候候只要經過 jQuery 等工具異步獲取數據後經過 setOption 填入數據和配置項就行。javascript

綁定數據的方式有兩種，一種是寫寫好一些圖表參數，而後數據留空，而後在異步讀取數據的時候，綁定數據。還有一種就是直接異步讀取數據的時候同時設置圖表參數和數據綁定。css

準備要加載的數據文件data.json假數據實際項目中數據是由後臺傳遞過來的，數據內容：html

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

第一種異步加載的時候設置圖表參數和綁定數據，JavaScript中的代碼以下：java

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
                	}
                ]
			});
		});

運行結果爲jquery

第二種先設置圖表參數，後綁定數據。 JavaScript中的代碼以下：json

// 初始化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();

因爲運行的動態圖上傳有點麻煩，在這裏我截圖兩張圖片，分別是加載前與加載後:echarts

加載後圖片：dom

數據動態實時更新

數據實時更新的代碼：異步

    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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。