效果展示：

上圖中每隔兩秒鐘動態載入一次資料，詳細設定程式碼如下：

  1    <script type="text/javascript">
  2     var dom = document.getElementById("container");
  3     var myChart = echarts.init(dom);
  4     option = {
  5         title: {
  6             text: '動態資料',
  7             subtext: '純屬虛構'
  8         },
  9         tooltip: {
 
 10             trigger: 'axis',
 11             axisPointer: {
 12                 type: 'cross',
 13                 label: {
 14                     backgroundColor: '#283b56'
 15                 }
 16             }
 17         },
 18         legend: {
 19             data: ['最新成交價', '預購佇列']
 20         },
 
 21         toolbox: {
 22             show: true,
 23             feature: {
 24                 dataView: { readOnly: false },
 25                 restore: {},
 26                 saveAsImage: {}
 27             }
 28         },
 29         dataZoom: {
 30             show: false,
 31             start: 0,
 
 32             end: 100
 33         },
 34         xAxis: [
 35             {
 36                 type: 'category',
 37                 boundaryGap: true,
 38                 data: (function () {
 39                     var now = new Date();
 40                     var res = [];
 41                     var len = 10;
 42                     while (len--) {
 43                         res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
 44                         now = new Date(now - 2000);
 45                     }
 46                     return res;
 47                 })()
 48             },
 49             {
 50                 type: 'category',
 51                 boundaryGap: true,
 52                 data: (function () {
 53                     var res = [];
 54                     var len = 10;
 55                     while (len--) {
 56                         res.push(10 - len - 1);
 57                     }
 58                     return res;
 59                 })()
 60             }
 61         ],
 62         yAxis: [
 63             {
 64                 type: 'value',
 65                 scale: true,
 66                 name: '價格',
 67                 max: 30,
 68                 min: 0,
 69                 boundaryGap: [0.2, 0.2]
 70             },
 71             {
 72                 type: 'value',
 73                 scale: true,
 74                 name: '預購量',
 75                 max: 1200,
 76                 min: 0,
 77                 boundaryGap: [0.2, 0.2]
 78             }
 79         ],
 80         series: [
 81             {
 82                 name: '預購佇列',
 83                 type: 'bar',
 84                 xAxisIndex: 1,
 85                 yAxisIndex: 1,
 86                 data: (function () {
 87                     var res = [];
 88                     var len = 10;
 89                     while (len--) {
 90                         res.push(Math.round(Math.random() * 1000));
 91                     }
 92                     return res;
 93                 })()
 94             },
 95             {
 96                 name: '最新成交價',
 97                 type: 'line',
 98                 data: (function () {
 99                     var res = [];
100                     var len = 0;
101                     while (len < 10) {
102                         res.push((Math.random() * 10 + 5).toFixed(1) - 0);
103                         len++;
104                     }
105                     return res;
106                 })()
107             }
108         ]
109     };
110 
111     var count = 11;
112     setInterval(function () {
113         var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
114 
115         var data0 = option.series[0].data;
116         var data1 = option.series[1].data;
117         data0.shift();
118         data0.push(Math.round(Math.random() * 1000));
119         data1.shift();
120         data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
121 
122         option.xAxis[0].data.shift();
123         option.xAxis[0].data.push(axisData);
124         option.xAxis[1].data.shift();
125         option.xAxis[1].data.push(count++);
126 
127         myChart.setOption(option);
128     }, 2100);
129 
130    
131     </script>

使用setInterval(function () { show() }, 2100); 函式定時兩秒鐘執行一次show（）方法，x軸資料由var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');獲取到最新的時間

var data0 = option.series[0].data;
var data1 = option.series[1].data;
這兩行程式碼獲取取到現在圖表中的所有數值，用data0.shift();刪除掉陣列中第一個元素，使用data0.push(Math.round(Math.random() * 1000));向陣列末尾新增一個隨機的數值
兩組資料以相同的方式刪除第一條資料再向末尾新增一條資料

上下兩個X軸的資料也是以相同的方式刪除第一條末尾新增一條的方式處理資料
最後用myChart.setOption(option);載入資料。

整體思路還是比較簡單的，至於圖示的各個屬性設定可以檢視：https://www.cnblogs.com/xiong950413/p/13322440.html

Echart更多圖示請查閱：https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data