echarts 环形图图将图例图标设置成矩形
时间: 2023-07-29 12:07:29 浏览: 132
ECharts中矩形图实例(源代码可直接运行)
3星 · 编辑精心推荐
同样地,您可以使用 ECharts 中的 `legend` 组件的 `type` 属性来设置图例的样式。要将图例图标设置成矩形,可以将 `type` 属性的值设置为 `"rect"`。同时,您可以使用 `legend` 组件的 `formatter` 属性来自定义图例的显示内容。
下面是一个示例代码,展示了如何将环形图的图例图标设置为矩形:
```javascript
option = {
title: {
text: '环形图示例',
subtext: '数据仅供参考',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
type: 'rect', // 将图例图标设置为矩形
formatter: function(name) {
return '{rect| }' + name; // 在图例文本前加上一个矩形
},
data: ['数据1', '数据2', '数据3', '数据4', '数据5']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '数据1'},
{value: 310, name: '数据2'},
{value: 234, name: '数据3'},
{value: 135, name: '数据4'},
{value: 1548, name: '数据5'}
]
}
]
};
```
在上面的代码中,`legend` 组件的 `type` 属性被设置为 `"rect"`,表示图例图标类型为矩形。`legend` 组件的 `formatter` 属性用于自定义图例文本的显示内容,这里在图例文本前添加了一个矩形。
阅读全文