咨询电话:
15628812133
03
2023/08

Echarts玫瑰饼图控制图表颜色文字一致

发布时间:2023-08-03 17:17:38
发布者:墨炎
浏览量:
0

       在echarts的默认配置里,描述的文字都是以series中data中的name为数据,颜色为data中的label下的color控制,知道了修改的方法那么修改就很简单了。控制echarts图表的颜色在option.color,而echarts官方是有默认颜色的。

Echarts玫瑰饼图控制图表颜色文字一致

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

       我们可以直接设置color的颜色为以上数组。然后再往data中的每个对象添加color,以下是我添加的例子,可以使用map循环遍历数组,根据索引值取处颜色数组中的对应数据,增加对象键值对。

Echarts玫瑰饼图控制图表颜色文字一致

      颜色已经改变完成,第二部来改变文字,要做成如下样式的图表。我们通过更改series中data中的name来实现。

Echarts玫瑰饼图控制图表颜色文字一致

      然后我们发现不仅描述的文字改变了,图例的文字也改变了,这不符合我们的设计稿。

Echarts玫瑰饼图控制图表颜色文字一致

于是翻阅了echarts的文档,发现以下规则,formatter支持以回调函数的形式设置。

Echarts玫瑰饼图控制图表颜色文字一致

于是我们设置如下回调函数。打印出params数据如下。再通过行高设置文字之间距离。

Echarts玫瑰饼图控制图表颜色文字一致

Echarts玫瑰饼图控制图表颜色文字一致

Echarts玫瑰饼图控制图表颜色文字一致





返回列表