echarts 饼图将图例图标设置成举行
时间: 2023-07-29 16:07:29 浏览: 107
echarts制作的饼状图
4星 · 用户满意度95%
您可以通过 echarts 的 legend 属性中的 textStyle 属性来设置图例文字的样式,包括字体、颜色、大小等。同时,可以通过 formatter 属性来自定义图例文本的显示内容。
要将图例图标设置成矩形,可以在 legend 属性中设置 type 为 "rect"。下面是一个示例代码:
```javascript
option = {
...
legend: {
type: 'rect',
textStyle: {
color: '#333',
fontSize: 14
},
formatter: function(name) {
return '{rect| }' + name; // 在图例文本前加上一个矩形
},
data: ['数据1', '数据2', '数据3']
},
...
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 335, name: '数据1'},
{value: 310, name: '数据2'},
{value: 234, name: '数据3'}
],
...
}
]
};
```
在上面的代码中,legend.type 属性被设置为 "rect",表示图例图标类型为矩形。legend.textStyle 属性用于设置图例文本的样式,包括颜色和字体大小;legend.formatter 属性用于自定义图例文本的显示内容,这里在图例文本前添加了一个矩形。
阅读全文