echarts饼图legend样式
时间: 2023-08-16 13:14:45 浏览: 106
echarts制作的饼状图
4星 · 用户满意度95%
你可以使用 ECharts 的 `legend` 属性来自定义饼图的图例样式。以下是一个示例:
```javascript
option = {
// ... 其他配置项
legend: {
orient: 'vertical', // 图例的布局方式,默认为水平布局,可选值有 'horizontal' 和 'vertical'
left: 'left', // 图例的水平位置,默认为 'center',可选值有 'left', 'center', 'right'
top: 'center', // 图例的垂直位置,默认为 'auto',可选值有 'top', 'center', 'bottom'
textStyle: {
color: '#333', // 图例文字的颜色
fontSize: 14, // 图例文字的字体大小
},
// 其他样式配置项
},
series: [
{
type: 'pie',
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
// ... 其他配置项
}
]
};
```
以上示例中,`legend` 对象中的 `textStyle` 属性用于设置图例文字的颜色和字体大小。你还可以根据需要设置其他样式配置项来进一步自定义饼图的图例样式。
注意:以上代码仅为示例,实际使用时需要根据你的具体需求进行适当调整。
阅读全文