Echart 动态更新地图 更新数据 更新visualMap 组件( 更新visualMap不生效可能原因)

最近做一个项目,是利用echarts来做疫情数据可视化,由于全国疫情的累计数据和现在确诊数据有较大的差距,所以如果visualMap 组件中,min与max字段如果使用相同的内容范围,那么将会导致新增数据展示非常不明显

例如

 


如果直接使用 现有确诊的范围,那么累计确诊的显示就会很难看(看不出差别,如果直接使用累计确诊的范围来做标尺,那么也就出现完全相反的情况,累计确诊展示正常、现有确诊比较难区别)

Echart 动态更新地图 更新数据 更新visualMap 组件( 更新visualMap不生效可能原因)_第1张图片

Echart 动态更新地图 更新数据 更新visualMap 组件( 更新visualMap不生效可能原因)_第2张图片

 

因此,必须要动态调整这个标尺,那么如何调整呢?(如需要动态更新数据,请见 下面代码中 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发现没有生效,后面发现原来是我犯了这个错误,

Echart 动态更新地图 更新数据 更新visualMap 组件( 更新visualMap不生效可能原因)_第3张图片

最后我改成了,就可以实现动态更新了,其实Echart是非常强大的,你如果需要更新,只需要setOption一下,图形显示的数据就会更新了

Echart 动态更新地图 更新数据 更新visualMap 组件( 更新visualMap不生效可能原因)_第4张图片

你可能感兴趣的:(前端,数据可视化)