echarts legend 两行显示还能翻页
时间: 2023-07-28 10:23:24 浏览: 150
是的,ECharts的图例(legend)支持两行显示并且可以翻页。你可以通过设置图例的属性来实现这个功能。以下是一个示例代码:
```javascript
option = {
// 其他配置项...
legend: {
type: 'scroll',
orient: 'horizontal',
itemWidth: 10,
itemHeight: 10,
top: 20,
left: 'center',
data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10', '数据11', '数据12', '数据13', '数据14', '数据15', '数据16', '数据17', '数据18', '数据19', '数据20', '数据21', '数据22', '数据23', '数据24', '数据25', '数据26', '数据27', '数据28', '数据29', '数据30', '数据31', '数据32', '数据33', '数据34', '数据35', '数据36', '数据37', '数据38', '数据39', '数据40', '数据41', '数据42', '数据43', '数据44', '数据45', '数据46', '数据47', '数据48', '数据49', '数据50']
},
// 其他配置项...
};
```
在上面的代码中,我们将图例的 `type` 属性设置为 `'scroll'`,表示启用翻页功能。 `orient` 属性设置为 `'horizontal'`,表示水平方向排列。 `itemWidth` 和 `itemHeight` 属性分别设置为 10,表示每个图例项的宽度和高度。 `top` 属性设置为 20,表示距离顶部的距离。 `left` 属性设置为 `'center'`,表示居中对齐。 `data` 属性设置了 50 个图例项的名称。
通过上述设置,当图例项数量超过一定值时,ECharts会自动启用翻页功能,并且可以显示两行图例项。你可以根据实际情况调整上述属性的值,以达到最佳的效果。