快捷導(dǎo)航

echarts自定義餅圖數(shù)據(jù)刷新和顏色渲染問題淺析

更新時間：2023年05月06日 16:17:49 作者：兔子先森

這篇文章主要給大家介紹了關(guān)于echarts自定義餅圖數(shù)據(jù)刷新和顏色渲染問題的相關(guān)資料,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,需要的朋友可以參考下

在使用echarts的自定義餅圖Customized Pie時，定義的動態(tài)數(shù)據(jù)會發(fā)生顏色無法渲染的問題，如下圖所示：

該圖表的顏色是根據(jù)itemStyle內(nèi)的color屬性而來，如下：

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

動態(tài)渲染圖表的數(shù)據(jù)，也就是更改option里的數(shù)據(jù)，使用myChart.setOption(option);即可動態(tài)渲染圖表，但這個時候發(fā)現(xiàn)，部分圖表的顏色是白色的，而且出現(xiàn)白色的區(qū)域是不固定的，這是因?yàn)樵O(shè)置了visualMap，該屬性就是用來約束視覺表現(xiàn)，通過data的數(shù)據(jù)來進(jìn)行視覺約束，具體數(shù)據(jù)如下：

// 圖表數(shù)據(jù)
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參數(shù)代表最低的value值，max代表最高value值，上面的數(shù)據(jù)中，value最高的達(dá)到了759，超過了visualMap的max范圍，所以會被設(shè)置為colorLightness亮度的最大值1，當(dāng)一個物體的最大亮度到達(dá)了1，那么它就會默認(rèn)變?yōu)榘咨?/p>

到這里我們可以有兩種方法修改上述的白色區(qū)塊問題：

1、修改min和max的取值范圍

2、修改colorLightness的最大亮度值

修改min和max的取值范圍

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

修改colorLightness的最大亮度值

colorLightness: [0, 0.8]  // 物體的亮度范圍

建議修改最大取值范圍min和max，我們只取最大范圍內(nèi)的值即可。如果僅僅修改最大亮度，那么超出的最大范圍的值它們的顏色就會是一樣的。

一些報(bào)錯問題和優(yōu)化的解決

這種報(bào)錯是因?yàn)?code>echarts已經(jīng)初始化了，未卸載實(shí)例又進(jìn)行了一次初始化就會報(bào)該錯誤，這種只需要實(shí)例化一次的，把初始化echarts定義為全局變量，放到onMounted里只實(shí)例化一次，全局調(diào)用即可。也可以使用echarts.init(domNode.value).dispose()銷毀和myChart.clear()清除實(shí)例。

總結(jié)

到此這篇關(guān)于echarts自定義餅圖數(shù)據(jù)刷新和顏色渲染問題的文章就介紹到這了,更多相關(guān)echarts自定義餅圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: