echarts中legend的字体颜色跟随icon的颜色
时间: 2023-07-30 21:12:56 浏览: 178
在echarts中图例legend和坐标系grid实现左右布局实例
可以通过设置legend的textStyle属性来控制legend的字体颜色,同时可以通过设置legend的formatter属性来动态控制legend的显示内容,从而实现legend的字体颜色跟随icon的颜色。具体实现方式如下:
1. 在legend中设置formatter属性,用于动态控制legend的显示内容。例如:
```
legend: {
formatter: function(name) {
return '{' + name + '|}\n{name|' + name + '}';
},
textStyle: {
rich: {
name: {
fontSize: 14,
fontWeight: 'bold',
color: '#333'
}
}
}
}
```
上述代码中,通过设置formatter属性,将legend的显示内容分成两部分,一部分是icon,另一部分是文本。其中icon部分使用默认颜色,文本部分通过设置rich属性中的name样式来控制字体颜色。
2. 在series的data中,为每个数据项设置icon的颜色。例如:
```
series: [{
data: [
{
value: 335,
name: '直接访问',
itemStyle: {
color: '#c23531'
}
},
{
value: 310,
name: '邮件营销',
itemStyle: {
color: '#2f4554'
}
},
{
value: 234,
name: '联盟广告',
itemStyle: {
color: '#d48265'
}
},
{
value: 135,
name: '视频广告',
itemStyle: {
color: '#91c7ae'
}
},
{
value: 1548,
name: '搜索引擎',
itemStyle: {
color: '#749f83'
}
}
],
// 其他配置项
}]
```
上述代码中,每个数据项都通过itemStyle属性设置了icon的颜色。
通过上述两个步骤的操作,可以实现legend的字体颜色跟随icon的颜色。
阅读全文