echarts圆环图例样式
时间: 2023-06-28 11:04:33 浏览: 94
vue中使用echarts制作圆环图的实例代码
你可以使用 ECharts 中的 `legend` 组件来自定义圆环图例的样式。以下是一个示例代码:
```javascript
option = {
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
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: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
```
在上面的示例代码中,`legend` 组件的样式可以通过 `orient` 属性来设置垂直或水平方向,通过 `left` 或 `right` 属性来设置位置。你可以根据自己的需求来修改这些属性。
阅读全文