echarts图例⽂字颜⾊与图例⼀致的配置，以及图例⽂字多种颜⾊
的配置
echarts  中图例⽂字的颜⾊默认是⿊⾊，通常我们配置图例⽂字颜⾊有两种⽅式：
⼀、在lengend 中配置data属性，data⾥⾯定义各图例的⽂本，以及该⽂本对应的样式，这⾥的⽂本就与option中的series中的data 重复了，【echart实际上的图例数据是根据series中的data来的】，⽽⼀般series中的data数据是从接⼝获取的，不固定。所以不建议⽤这种⽅式
legend: {
orient: 'vertical', //图例列表的布局朝向（垂直排列）
left: '50%',
y: 'center',
itemGap: 30,
itemWidth: 8,
padding: 10,
textStyle: {
fontSize: 12,
color: '#FFFFFF',
},
align: 'left',
data: [
// '待下发','处置中','已完成'
{
name: '待下发',
icon: 'circle',
textStyle: {
color: 'red'          // 图例⽂字颜⾊
}
},
{
name: '处置中',
icon: 'circle',
textStyle: {
color: 'yellow'          // 图例⽂字颜⾊
}
},
{
name: '已完成',
icon: 'circle',
textStyle: {
color: 'pink'          // 图例⽂字颜⾊
}
},
],
⼆、在lengend 中通过formmatter函数配合textStyle中的属性rich富⽂本来格式化处理样式或者内容等
formatter: function (name) {
var total = 0fontweight属性bold
var target
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value
}
}
var arr = ['{a|' + name + ' :}{b|' + target + '}{a|个}']
return arr.join('\n')
},
textStyle: {
rich: {
a: {
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
color: '#FFFFFF',
align: 'left',
padding: [0, 0, 0, 10],
},
b: {
fontSize: 26,
fontFamily: 'DIN',
fontWeight: 'bold',
color: '#3F98FD',
align: 'right',
padding: [0, 0, 0, 10],
lineHeight: 25,
}
}
}
如果要设置图例⽂字颜⾊与图例⼀致的话，直接设置textStyle的 color为'auto'即可
但是使⽤color为'auto'需要注意的是，如果需要对⽂字样式进⾏格式化处理的话，必须把⾃定义样式rich放在后⾯，否侧color为'auto'会被覆盖效果如下
如果UI效果⾮要让图例⽂字前半部分颜⾊固定，⽽后半部分⽂字颜⾊与图例颜⾊⼀致【不建议这种UI效果】，解决⽅法同样是最上⾯的2两种⽅式：
⼀、在lengend 中配置data属性，data⾥⾯定义各图例的⽂本，以及该⽂本对应的样式：
⼆、在farmatter中做if判断处理，当然这种不好的地⽅就是要⼀个个判断并对每⼀个图例进⾏富⽂本样式处理：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。