echarts餅圖指示器文字顏色設置不同實例詳解
學習記錄，平時開發(fā)時遇到過的問題
echarts餅圖label文字顏色
需求： 繪制一份環(huán)形餅狀圖，并且有指示器文本標簽（文字的顏色需要和各部分相同）
數據：
pieData: [
{
name: '犯人',
value: 30
},
{
name: '官差',
value: 35
},
{
name: '平民',
value: 35
},
]，
// 顏色
colorList: ['#EA7267', '#F0D84B', '#7AE72F']
制作一張環(huán)形餅圖其實很簡單，echarts官網上也有示例，地址：https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut
主要繪制代碼：
let options = {
......
series: [
{
type: 'pie',
radius: ['40%', '62%'],
data: this.pieData,
itemStyle: {
color:(params)=> {
var index = params.dataIndex;
return this.colorList[index];
},
},
label: { },
}
],
}
效果：
問題
但是很明顯能夠看到餅圖的指示器文本標簽中的文字顏色都是相同的
從echarts的配置項API查看也知道可以在label中設置color進行配置，但是這樣配置出來的顏色又都是相同了
解決方法
既然如此，那么久只能在data傳入的數據中做文章了
將上面的pieData數組添加label屬性，這樣一來，也就不需要在series重新設置label了，并且指示器中文字的顏色也不同了
修改后：
series: [
{
type: 'pie',
radius: ['40%', '62%'],
data: this.pieData.map((item, index)=> {
item.label = {
color: this.colorList[index]
}
return item;
}),
itemStyle: {
color:(params)=> {
var index = params.dataIndex;
return this.colorList[index];
},
},
}
],
效果：
餅圖位置
這里再記錄一個知識點，echarts中通常折線圖和柱狀圖如果想要調整在畫布中的位置可以使用grid屬性，但是餅圖不一樣，餅圖需要在series中調節(jié)center,這是一個數組
center是餅圖的中心（圓心）坐標，數組的第一項是橫坐標，第二項是縱坐標。支持設置成百分比，設置成百分比時第一項是相對于容器寬度，第二項是相對于容器高度。
示例：
前端開發(fā)總會遇到圖表的需求，繪制圖表簡單的可以使用canvas，復雜的統(tǒng)計圖表基本都會使用庫，比如：echarts、amcharts。
因為不同的業(yè)務需求，總會遇到卡點，平時把解決過的問題記錄下來，萬一能幫到別人呢（畢竟自己也肯定會從別人博客中查找問題解決方案）
總結
到此這篇關于echarts餅圖指示器文字顏色設置不同的文章就介紹到這了,更多相關echarts餅圖指示器文字顏色內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
網頁截圖是指將網頁上的內容截取下來,并保存為圖片的過程,下面這篇文章主要給大家介紹了關于JavaScript實現頁面截圖的3種解決方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了JavaScript中的異步能省掉await嗎?一直以來，困擾我的一個問題是JavaScript中，能否實現不帶await的異步。今天我終于把這個問題想通了然后分享給大家，希望對大家的學習過程有所幫助2021-12-12
這篇文章主要介紹了Javascript判斷文件是否存在的方法適用于客戶端、服務器端，遠程文件，示例代碼如下,需要的朋友可以參考下2014-09-09
這篇文章主要為大家詳細介紹了JS實現頁面跳轉并傳值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
小程序封裝wx.request請求并創(chuàng)建接口管理文件的實現
這篇文章主要介紹了小程序封裝wx.request請求并創(chuàng)建接口管理文件2019-04-04
這篇文章主要給大家介紹了關于echarts同一頁面中四個圖表切換的js數據交互的相關資料，文中給出了完整的示例代碼供大家參考學習，對大家的學習或者工作具有一定的幫助，需要的朋友們下面隨著小編來一起學習學習吧2018-07-07
這篇文章主要為大家介紹了websocket直接繞過JS加密的示例及思路原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
下面小編就為大家分享一篇基于js 各種排序方法和sort方法的區(qū)別(詳解)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要給大家介紹了關于JavaScript中正則表達式實際應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要為大家詳細介紹了js cookie實現記住密碼功能的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01