echarts饼图label文字颜色

需求：绘制一份环形饼状图，并且有指示器文本标签（文字的颜色需要和各部分相同）

数据如下：

data: [{name: '老年',value: 30},{name: '青壮年',value: 35},{name: '儿童',value: 35},
]，
// 颜色
colorList: ['#EA7267', '#F0D84B', '#7AE72F']

常规的标签都是黑色的：

直接在label中设置color，但是这样配置出来的颜色又都相同了

解决办法：给上面的data数组添加label属性，这样一来，也就不需要在series重新设置label了，并且指示器中文字的颜色也不同了

关键代码如下：

      data: data.map((item, index) => {item.label = {color: colorList[index]};return item;}),itemStyle: {color: (params) => {var index = params.dataIndex;return colorList[index];}},

echarts饼图label文字颜色相关推荐

echarts饼图指示器文字颜色设置不同
学习记录,平时开发时遇到过的问题 echarts饼图label文字颜色
解决echarts饼图显示百分比，和显示内容字体及大小,如何给eCharts饼图区域指定颜色
解决echarts饼图显示百分比,和显示内容字体及大小 // 基于准备好的dom,初始化echarts实例 var pieEchart = echarts.init(document. ...
echarts饼图提示文字标签重叠怎么处理
echarts饼图提示文字默认如图二(高危123占比都为0) 即便是存在多个item占比都为0 也是不会重叠的如果如图一提示文字重叠了很可能是series里设置了avoidLabelOver ...
Echarts 饼图设置标签颜色（单个标签颜色、多个标签颜色）
1 使用详解 (1)series.data.label.color 说明:单个标签颜色. (2)series.label.color 说明:所有标签颜色. 2 设置单个标签颜色 2.1 实现代码 &l ...
label文字颜色_HowTo —— SwiftUI2.0如何使用Label
SwiftUI2.0中新增了Label控件,方便我们添加由图片和文字组成的标签基本用法 Label 支持自定义标签风格 import 使用自己的Label控件,更多控制力 Label能够提高开发效率 ...
Echarts饼图标题文字居中
只要在series里配置如下 label: {normal: {show: true,fontWeight:'bolder',position: 'center',color:'#9A9EBA',fo ...
Echarts 改变地图文字颜色大小，以及鼠标经过颜色
series: [// 定义地图类型,数据{name: "china",type: "map",mapType: "china",data: ...
解决echarts饼图label显示不全的问题
今天画饼图的时候,发现某些数据的标签自动隐藏了,怎么调整都不能完全显示,如图: 解决办法添加如下配置: labelLayout: {hideOverlap: false}, 最终效果
echarts饼图自定义设置颜色的三种方式
第一种方式 option下 color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'], 整体代码如下: option ...

echarts饼图label文字颜色

echarts饼图label文字颜色相关推荐

最新文章

热门文章