echarts 饼状图图例
时间: 2023-11-01 10:52:17 浏览: 103
饼状图的图例是用来表示每个扇形区域所代表的数据的标签。在 Echarts 中,可以通过配置来设置饼状图的图例。
首先,你需要在 option 对象中的 legend 属性中进行相应配置。例如:
```javascript
option = {
// 其他配置...
legend: {
data: ['分类一', '分类二', '分类三', '分类四', '分类五'], // 图例的数据项
orient: 'vertical', // 图例的布局方向,可选值为 'horizontal' 和 'vertical'
left: 'right', // 图例水平对齐方式,可选值为 'left', 'center', 'right'
top: 'center', // 图例垂直对齐方式,可选值为 'top', 'middle', 'bottom'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%', // 饼状图半径
center: ['50%', '50%'], // 饼状图中心位置
data: [
{ value: 335, name: '分类一' },
{ value: 310, name: '分类二' },
{ value: 234, name: '分类三' },
{ value: 135, name: '分类四' },
{ value: 1548, name: '分类五' }
],
// 其他配置...
}
]
};
```
通过上述配置,你可以设置图例的数据项、布局方向、水平对齐方式以及垂直对齐方式。在这个例子中,图例会显示五个分类的名称,并且布局方向是垂直的,水平对齐方式是右对齐,垂直对齐方式是居中。
你还可以进一步自定义图例的样式,例如设置图例的字体颜色、字体大小等。具体的配置可以参考 Echarts 官方文档中关于 legend 的部分。
阅读全文