echarts 图例样式圆形
时间: 2023-10-03 10:05:50 浏览: 167
要将 ECharts 图例的样式改为圆形,可以通过设置 `legend.itemStyle` 属性来实现。
以下是一个简单的例子:
```javascript
option = {
legend: {
data: ['A', 'B', 'C'],
itemWidth: 14, // 图例标记的宽度
itemHeight: 14, // 图例标记的高度
itemGap: 10, // 图例每项之间的间隔
itemStyle: { // 图例项的样式
borderRadius: '50%', // 将图例标记的样式改为圆形
borderWidth: 0 // 去掉图例标记的边框
}
},
series: [
{
name: 'A',
type: 'line',
data: [1, 2, 3]
},
{
name: 'B',
type: 'line',
data: [3, 2, 1]
},
{
name: 'C',
type: 'line',
data: [2, 3, 1]
}
]
};
```
在上面的例子中,我们通过设置 `legend.itemStyle.borderRadius` 属性为 `'50%'`,将图例标记的样式改为圆形。此外,我们还设置了 `legend.itemStyle.borderWidth` 属性为 `0`,去掉了图例标记的边框。
你可以根据自己的需求调整这些属性的值,以达到想要的效果。
阅读全文
相关推荐















