小知识，大挑战！本文正在参与「程序员必备小知识」创作活动
起因是需要做一个展示数据分析的动态图表，原本的计划是打算使用superset，但是感觉稍微麻烦了点，最后考虑使用简单的图表库echarts来做。
我们简单的使用一下，就不考虑在框架中使用了，而是直接在html中使用。
首先是通过cdn引入。
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
echarts的使用我个人感觉和react的使用有点像。
首先我们需要有一个显示图表的节点, 不过与react不同echarts要使用的节点需要有宽度和高度 ，不过并非一定要在创建节点时指定，后续初始化时 也可以指定。
<div id="container" style="width: 50%;height:50%;"></div>
为了使用图表我们需要初始化一个对象，像下面这样
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);
最终我们可以获得一个动态更新的图表，整体还是比较简单易于操作的。
