legend单独调整小圆点的位置
时间: 2023-08-24 07:24:47 浏览: 74
小圆点菜单
如果您想要单独调整 ECharts 的 legend 小圆点的位置,可以使用 ECharts 的 formatter 属性和 icon 属性来实现。具体步骤如下:
1. 在 legend 中设置 formatter 属性,返回一个带有自定义样式的 HTML 字符串。
```
legend: {
formatter: function(name) {
return '<div style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#c23531;margin-right:5px;"></div>' + name;
},
data: ['图例一', '图例二', '图例三']
}
```
2. 在 series 中设置对应的 name 属性和数据,并在对应的 icon 属性中设置为 "none"。
```
series: [
{
name: '图例一',
type: 'bar',
data: [10, 20, 30],
itemStyle: {
normal: {
color: '#c23531',
barBorderRadius: [5, 5, 0, 0]
}
},
// 将图例的 icon 设置为 none
icon: 'none'
},
{
name: '图例二',
type: 'bar',
data: [20, 30, 40],
itemStyle: {
normal: {
color: '#2f4554',
barBorderRadius: [5, 5, 0, 0]
}
},
// 将图例的 icon 设置为 none
icon: 'none'
},
{
name: '图例三',
type: 'bar',
data: [30, 40, 50],
itemStyle: {
normal: {
color: '#61a0a8',
barBorderRadius: [5, 5, 0, 0]
}
},
// 将图例的 icon 设置为 none
icon: 'none'
}
]
```
这样就可以单独调整 legend 小圆点的位置了。您可以根据自己的需求调整样式和位置。
阅读全文