echarts饼图设置legend为圆点
时间: 2023-07-28 17:12:21 浏览: 117
echarts饼图各个板块之间的空隙如何实现
可以通过设置 `legend` 的 `formatter` 属性来实现饼图的 `legend` 显示为圆点。具体操作如下:
1. 在 `legend` 中设置 `formatter` 属性为一个函数,该函数返回一个 HTML 字符串。
2. 在函数中,使用 `<span>` 标签来创建一个圆点,并设置其样式为对应饼图数据项的颜色。
以下是一个示例代码:
```javascript
option = {
// ... 其他配置项
legend: {
// 设置 formatter 属性为一个函数
formatter: function(name) {
// 获取饼图数据项的颜色
var color = option.colorList[this.data.indexOf(name)];
// 使用 span 标签创建一个圆点,并设置其样式为对应颜色
return '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>' + name;
},
// ... 其他 legend 配置项
},
// ... 其他配置项
};
```
需要注意的是,上述代码中的 `colorList` 数组需要与饼图数据项的顺序一致。如果你在配置饼图时没有单独设置每个数据项的颜色,可以通过 `series` 的 `color` 属性来设置整个饼图的颜色列表,如下所示:
```javascript
option = {
// ... 其他配置项
color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
series: [{
type: 'pie',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
// ... 其他系列配置项
}],
// ... 其他配置项
};
```
阅读全文