echarts about custom pie chart data refresh and color rendering issues

When using echartsa custom pie chart Customized Pie, the defined dynamic data will cause the problem that the color cannot be rendered, as shown in the following figure:

The color of the chart is based on the properties itemStyleinside color, as follows:

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

Dynamically render the data of the chart, that is, change optionthe data in it, and use it myChart.setOption(option);to dynamically render the chart, but at this time, it is found that the color of some charts is white, and the white area is not fixed. This is because the setting, visualMapthe Attributes are used to constrain the visual performance, and datathe data is used to perform visual constraints. The specific data are as follows:

// 图表数据
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]  // 物体的亮度范围
     }
 }

visualMapThe minparameter represents the lowest valuevalue, maxand represents the highest valuevalue. Among the above data, valuethe highest value has reached 759or exceeded the range, so it will be set as the maximum value visualMapof the brightness . When the maximum brightness of an object is reached , it will default to turns white. Here we can have two ways to modify the above white block problem: 1. Modify the value range of the sum 2. Modify the maximum brightness valuemaxcolorLightness11

minmax
colorLightness

Modify the value range of min and max

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

Modify the maximum brightness value of colorLightness

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

minIt is recommended to modify the sum of the maximum value range max, we only take the value within the maximum range. If only the maximum brightness is modified, values ​​beyond the maximum range will have the same color.

Some error reporting problems and optimized solutions

This kind of error is reported because echartsit has already been initialized. If the unloaded instance is initialized again, the error will be reported. This kind of instance only needs to be instantiated once. The initialization is defined echartsas a global variable, and it is onMountedonly instantiated once in the global call. Can. echarts.init(domNode.value).dispose()Destroy and myChart.clear()clear instances can also be used .

---

If you think this article is helpful to you, please like, bookmark and forward~