echarts实现legend分页

最新推荐文章于 2025-02-13 11:20:31 发布

yolo_Yang

最新推荐文章于 2025-02-13 11:20:31 发布

阅读量1.6w

点赞数 2

分类专栏： Echarts 文章标签： Echarts

本文链接：https://blog.youkuaiyun.com/yl640007010/article/details/79731604

版权

Echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Echarts中实现图例的分页显示，包括官方自带的图例滚动功能（从v3.7.0版本开始支持）以及通过特定配置实现的方法，详细参考了相关示例和博客文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【方法1】echarts自身支持legend分页，找了好久，太赞了，注意echarts的图例滚动式v3.7.0版本新加的

http://echarts.baidu.com/examples/editor.html?c=radar2

//折线图

option = {
title: {
text: 'Step Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
type: 'scroll',
//y:bottom,
bottom: 10,
data: (function (){
var list = [];
for (var i = 1; i <=10; i++) {
list.push(i + 2000 + '');
}
return list;
})()
},
grid: {
left: '3%',
right: '4%',
bottom: '7%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name:'2001',
type:'line',
step: 'start',
data:[101, 101, 101, 101, 101, 101, 101]
},
{
name:'2002',
type:'line',
step: 'middle',
data:[112, 112, 112, 112, 112, 112, 112]
},
{
name:'2003',
type:'line',
step: 'end',
data:[123, 123, 123, 123, 123, 123, 123]
},
{
name:'2004',
type:'line',
step: 'start',
data:[134, 134, 134, 134, 134, 134, 134]
},
{
name:'2005',
type:'line',
step: 'start',
data:[145, 145, 145, 145, 145, 145, 145]
},
{
name:'2006',
type:'line',
step: 'start',
data:[156, 156, 156, 156, 156, 156, 156]
},
{
name:'2007',
type:'line',
step: 'start',
data:[167, 167, 167, 167, 167, 167, 167]
},

]
};

//series内的name要与legend的data数据一致