echarts饼状图的设置legend文字颜色
时间: 2023-07-26 08:23:51 浏览: 1829
Echarts 饼状图
在 ECharts 中,可以通过设置 `legend` 的 `textStyle` 属性来控制图例(legend)中文字的样式,包括颜色、字体大小、字重等。下面是一个设置饼状图图例文字颜色的例子:
```javascript
option = {
legend: {
textStyle: {
color: '#333', // 设置图例文字颜色
fontSize: 14,
fontWeight: 'normal'
},
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
itemStyle: {
borderWidth: 5,
borderColor: '#ffffff',
},
emphasis: {
itemStyle: {
borderWidth: 0,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
```
在上面的例子中,通过设置 `legend` 的 `textStyle` 属性来控制图例文字的样式,其中 `color` 属性可以设置文字颜色,`fontSize` 属性可以设置文字大小,`fontWeight` 属性可以设置文字粗细。
需要注意的是,如果需要为不同的图例设置不同的文字样式,可以在 `legend` 的 `data` 属性中指定每个图例的名称,并在 `textStyle` 属性中为每个名称设置对应的样式,如下所示:
```javascript
legend: {
textStyle: {
color: '#333',
fontSize: 14,
fontWeight: 'normal',
rich: {
// 为每个图例设置不同的样式
a: {
color: '#ff0000',
fontSize: 16,
fontWeight: 'bold'
},
b: {
color: '#00ff00',
fontSize: 14,
fontStyle: 'italic'
},
c: {
color: '#0000ff',
fontSize: 12,
fontWeight: 'normal'
}
}
},
data: [
{name: '直接访问', textStyle: {rich: {a: {}}}},
{name: '邮件营销', textStyle: {rich: {b: {}}}},
{name: '联盟广告', textStyle: {rich: {c: {}}}},
{name: '视频广告', textStyle: {rich: {a: {}}}},
{name: '搜索引擎', textStyle: {rich: {b: {}}}}
]
}
```
在上面的例子中,通过在 `data` 属性中为每个图例指定名称和样式,然后在 `textStyle` 属性中设置每个样式的具体内容。
阅读全文