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

40次阅读

共计 1158 个字符,预计需要花费 3 分钟才能阅读完成。

在应用 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]  // 物体的亮度范畴
     }
 }

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

批改 min 和 max 的取值范畴

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

批改 colorLightness 的最大亮度值

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

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

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

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


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

正文完
 0