echarts绘制多图例饼图设置图例可滚动
时间: 2023-09-11 17:10:33 浏览: 300
要实现多图例饼图可滚动,需要使用 echarts 的图例滚动组件。具体步骤如下:
1. 在 option 中设置 legend.type 为 'scroll',即可开启图例滚动功能。
2. 在 series 中设置多个饼图,每个饼图对应一个图例。
3. 如果需要设置每个饼图的样式和数据,可以在对应的 series 中设置。
参考代码如下:
```javascript
option = {
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
},
series: [
{
name: '饼图1',
type: 'pie',
radius: ['50%', '70%'],
data: [
{value: 335, name: 'A'},
{value: 310, name: 'B'},
{value: 234, name: 'C'},
{value: 135, name: 'D'},
{value: 1548, name: 'E'}
]
},
{
name: '饼图2',
type: 'pie',
radius: ['50%', '70%'],
data: [
{value: 335, name: 'F'},
{value: 310, name: 'G'},
{value: 234, name: 'H'},
{value: 135, name: 'I'},
{value: 1548, name: 'J'}
]
}
]
};
```
这样就可以实现多图例饼图设置图例可滚动的效果了。
阅读全文