小知识：Echarts 实现动态图表

2023-10-13 19:51| 来源: 网络整理| 查看: 265

小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

起因是需要做一个展示数据分析的动态图表，原本的计划是打算使用superset，但是感觉稍微麻烦了点，最后考虑使用简单的图表库echarts来做。

我们简单的使用一下，就不考虑在框架中使用了，而是直接在html中使用。

首先是通过cdn引入。

echarts的使用我个人感觉和react的使用有点像。

首先我们需要有一个显示图表的节点, 不过与react不同echarts要使用的节点需要有宽度和高度，不过并非一定要在创建节点时指定，后续初始化时也可以指定。

为了使用图表我们需要初始化一个对象，像下面这样

let container = echarts.init(document.getElementById('container'));

然后在这个对象身上我们的setOption函数将会被用来设置相应的参数以显示图表。

首先我们使用一个最简单的折线图:

let x = [1, 2, 3, 5, 6, 7, 8, 9,10,11,12] let y = [120, 200, 150, 120, 200, 150, 120, 200, 150,120, 200, 210] let option = { legend: { data: ['成交量'], icon: 'rect', show: true }, xAxis: { type: 'category', data: x, boundaryGap: false, }, yAxis: { type: 'value' }, series: [ { name: '成交量', data: y, type: 'line', smooth: true, } ], };

其中legend用于设置图例，图例如果要正确显示则data的值与后续设置的数据的name要完全一致，否则不能显示。xAxis设置x轴的相关数据，boundaryGap设置则是为了我们后面修改x轴的值的时候，仍然从x轴开始，而不是空出一大截。

然后我们在series中设置我们的要展示的y轴数据 data字段，基本上都属于一些样式相关的，这里做模拟，姑且只使用一个数据，不设置多个了。

为了让数据在网页中显示出来，我们只需要使用先前创建的那个container对象调用 container.setOption(option)

网页中就可以显示出我们的折线图了。

接下来是我们要把它改造成动态的。echarts设计的setOption本身是可以多次调用的，当我们设置了新的数据之后，他会自动完成图的更新。而且更重要的是，echarts会自动在变更中间加入过渡的动画，而不是生硬的更新。

我们用随机数来假装有数据的更新，并且每次把x轴往后推进一位，然后我们设置一个定时更新。

const randomRange = (lower, upper) => { //生成范围内的随机整数 return Math.floor(Math.random() * (upper - lower)) + lower; } setInterval(() => { x = [...(x.slice(1, x.length)), x[x.length - 1] + 1] y = [...(y.slice(1, y.length)), y[y.length - 1] + randomRange(-50, 100)] //以最后的值为基础随机增减模拟更新操作 option.xAxis.data = x option.series[0].data = y container.setOption(option) }, 1000);

最终我们可以获得一个动态更新的图表，整体还是比较简单易于操作的。

【本文地址】

公司简介

联系我们