echart图例 分行分页
时间: 2025-02-07 14:09:41 浏览: 82
### ECharts 图例实现分行分页
为了使ECharts图例能够实现分页效果,可以利用`type: 'scroll'`属性来创建可滚动的图例。此方式适用于当数据量较大时,使得图例不会因为过多而挤占图表空间。
对于想要控制图例显示方向(水平或垂直),可以通过设置`orient`参数为`horizontal`或是`vertical`来达成目的[^1]。具体来说:
- `horizontal`: 默认选项,图例项按行排列;
- `vertical`: 图例项按照列的方式展示;
另外,针对图例样式的自定义也提供了丰富的接口,比如更改翻页图标颜色(`pageIconColor`)、未激活状态下的翻页图标颜色(`pageIconInactiveColor`)以及文本样式(`textStyle`)等[^4]。
下面是一个完整的例子用于说明如何配置带有分页功能的ECharts图例,并且实现了图例项的自动换行与分页处理:
```javascript
option = {
legend: {
type: "scroll",
orient: 'vertical', // 设置为纵向布局
pageIconColor: '#1b9aee',
pageIconInactiveColor: '#7f7f7f',
pageTextStyle: {color: "#fff"},
itemWidth: 10,
itemHeight: 10,
icon: "rect",
textStyle: {
color: "#ffffff",
fontSize: 12,
},
top: 10,
left: 'right',// 将图例放置于右侧
data: chartData && chartData.list ? chartData.list.map(v => v.name) : []
}
};
```
上述代码片段展示了如何通过修改`left`, `top`位置参数将图例定位至画布的不同区域,同时设置了图例条目宽度高度及形状等内容。值得注意的是,这里的数据源来自外部变量`chartData`中的列表映射得到的名字数组作为图例项的内容。
阅读全文
相关推荐














