Echarts 动态展示图标

效果展示：

 

 

上图中每隔两秒钟动态加载一次数据，详细设置代码如下：

  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

posted @ 2020-07-16 14:44  幸运(●￣(ｴ)￣●)  阅读(815)  评论(0)  编辑  收藏  举报
Document