久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

03
2023/08

Echarts玫瑰餅圖控制圖表顏色文字一致

發(fā)布時(shí)間:2023-08-03 17:17:38
發(fā)布者:墨炎
瀏覽量:
0

       在echarts的默認(rèn)配置里,描述的文字都是以series中data中的name為數(shù)據(jù),顏色為data中的label下的color控制,知道了修改的方法那么修改就很簡(jiǎn)單了??刂芿charts圖表的顏色在option.color,而echarts官方是有默認(rèn)顏色的。

Echarts玫瑰餅圖控制圖表顏色文字一致

['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

       我們可以直接設(shè)置color的顏色為以上數(shù)組。然后再往data中的每個(gè)對(duì)象添加color,以下是我添加的例子,可以使用map循環(huán)遍歷數(shù)組,根據(jù)索引值取處顏色數(shù)組中的對(duì)應(yīng)數(shù)據(jù),增加對(duì)象鍵值對(duì)。

Echarts玫瑰餅圖控制圖表顏色文字一致

      顏色已經(jīng)改變完成,第二部來(lái)改變文字,要做成如下樣式的圖表。我們通過(guò)更改series中data中的name來(lái)實(shí)現(xiàn)。

Echarts玫瑰餅圖控制圖表顏色文字一致

      然后我們發(fā)現(xiàn)不僅描述的文字改變了,圖例的文字也改變了,這不符合我們的設(shè)計(jì)稿。

Echarts玫瑰餅圖控制圖表顏色文字一致

于是翻閱了echarts的文檔,發(fā)現(xiàn)以下規(guī)則,formatter支持以回調(diào)函數(shù)的形式設(shè)置。

Echarts玫瑰餅圖控制圖表顏色文字一致

于是我們?cè)O(shè)置如下回調(diào)函數(shù)。打印出params數(shù)據(jù)如下。再通過(guò)行高設(shè)置文字之間距離。

Echarts玫瑰餅圖控制圖表顏色文字一致

Echarts玫瑰餅圖控制圖表顏色文字一致

Echarts玫瑰餅圖控制圖表顏色文字一致





返回列表