最近做一个项目,是利用echarts来做疫情数据可视化,由于全国疫情的累计数据和现在确诊数据有较大的差距,所以如果visualMap 组件中,min与max字段如果使用相同的内容范围,那么将会导致新增数据展示非常不明显
例如
如果直接使用 现有确诊的范围,那么累计确诊的显示就会很难看(看不出差别,如果直接使用累计确诊的范围来做标尺,那么也就出现完全相反的情况,累计确诊展示正常、现有确诊比较难区别)
因此,必须要动态调整这个标尺,那么如何调整呢?(如需要动态更新数据,请见 下面代码中 series 中的data)
很简单,直接通过你图标的对象进行一个setOption即可,具体如下图
myChart.setOption({
visualMap: {
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
text: ['高', '低'],//取值范围的文字
inRange: {
// color: ['#e0ffff', '#006edd']//取值范围的颜色
color: ['#e2ebf4', '#de1f05']//取值范围的颜色
},
show: true//图注
},
//通过series 中的data更新数据
series: {
data: dataList,
name: '累计确诊',
}
});
在调整过程中,我一度以为这个visualmap是不可以动态更新的,因为我更新visualMap发现没有生效,后面发现原来是我犯了这个错误,
扫描二维码关注公众号,回复:
13121639 查看本文章
最后我改成了,就可以实现动态更新了,其实Echart是非常强大的,你如果需要更新,只需要setOption一下,图形显示的数据就会更新了