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()清除实例。
总结
到此这篇关于echarts自定义饼图数据刷新和颜色渲染问题的文章就介绍到这了,更多相关echarts自定义饼图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript 是一门动态类型的脚本语言,用于在浏览器中创建交互式的网页,然而,由于其使用 IEEE 754 浮点数表示数字,可能会导致丢失精度的问题,本文将探讨 JavaScript 中的丢失精度问题,以及如何避免这些问题,需要的朋友可以参考下2023-11-11
这篇文章主要教大家如何简单实现js无缝滚动效果，js轮播图实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了js中传递特殊字符(+,&)的方法，有需要的朋友可以参考一下2014-01-01
这个例子使用的是转换为VML的语法，换成其他如SVG的语法，就可以转换成为SVG图形，单元数量可以任意加。2010-02-02
这篇文章主要为大家介绍了uni-app的pages.json处理方案示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
最近公司有一个项目的需要做出旋钮的效果，旋钮有十个档，根据手指旋转切换，旋转时接近最近的档会有吸附效果。这篇文章主要介绍了vue实现移动端圆形旋钮插件效果 ,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了微信端调取相册和摄像头功能图片上传服务器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
将字符串转化为xml对象需要注意的是该死的ie多版本的问题，具体实现如下，感兴趣的朋友不妨参考下本文，希望对大家有所帮助2013-09-09
这篇文章主要介绍了JavaScript设计模式之工厂方法模式介绍,本文讲解了简单工厂模式、多个工厂方法模式等内容,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了javascript省市级联功能实现方法,以不同实例形式分析了JavaScript实现省市级联菜单的具体技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
最新评论