关于前端:echarts关于自定义饼图数据刷新和颜色渲染问题

在应用echarts的自定义饼图Customized Pie时，定义的动态数据会产生色彩无奈渲染的问题，如下图所示：

该图表的色彩是依据itemStyle内的color属性而来，如下：

itemStyle: {     color: '#4d90fe',  /* 图表的色彩 */     shadowBlur: 200,     shadowColor: 'rgba(0, 0, 0, 0.5)'}

动静渲染图表的数据，也就是更改option里的数据，应用myChart.setOption(option);即可动静渲染图表，但这个时候发现，局部图表的色彩是红色的，而且呈现红色的区域是不固定的，这是因为设置了visualMap，该属性就是用来束缚视觉体现，通过data的数据来进行视觉束缚，具体数据如下：

// 图表数据const data = reactive([    { value: 486, name: '湖北' },    { value: 438, name: '湖南' },    { value: 574, name: '浙江' },    { value: 732, name: '广东' },    { value: 651, name: '上海' },    { value: 759, name: '北京' }])

// echarts的option属性 visualMap: {     show: false,   // 是否显示色轮     min: 80,  // 最小值     max: 600,  // 最大值     inRange: {           colorLightness: [0, 1]  // 物体的亮度范畴     } }

visualMap的min参数代表最低的value值，max代表最高value值，下面的数据中，value最高的达到了759，超过了visualMap的max范畴，所以会被设置为colorLightness亮度的最大值1，当一个物体的最大亮度达到了1，那么它就会默认变为红色。
到这里咱们能够有两种办法批改上述的红色区块问题：
1、批改min和max的取值范畴
2、批改colorLightness的最大亮度值

批改min和max的取值范畴

min: 0,  // 最小值max: 1000,  // 最大值

批改colorLightness的最大亮度值

colorLightness: [0, 0.8]  // 物体的亮度范畴

倡议批改最大取值范畴min和max，咱们只取最大范畴内的值即可。如果仅仅批改最大亮度，那么超出的最大范畴的值它们的色彩就会是一样的。

一些报错问题和优化的解决

这种报错是因为echarts曾经初始化了，未卸载实例又进行了一次初始化就会报该谬误，这种只须要实例化一次的，把初始化echarts定义为全局变量，放到onMounted里只实例化一次，全局调用即可。也能够应用echarts.init(domNode.value).dispose()销毁和myChart.clear()革除实例。

如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~