本文介绍了如何使用ECharts配置图例为滚动类型，以应对大量数据展示时的处理。主要代码展示了如何设置legend的type为'scroll'，并创建了一个包含2000个数据项的示例列表。同时，提供了完整的ECharts配置，包括x轴、y轴的设置，以及toolbox中切换折线图和柱状图的功能。
主要代码 ：
legend: {
type: "scroll", //分页类型
// y: '8%',
right: "15%",
data: (function() {
var list = [];
for (var i = 1; i <= 2000; i++) {
list.push(i + 2000 + "");
}
return list;
})()
},
全部代码：
zhexian: {
xAxis: {
type: "category",
boundaryGap: false,
data: [], //横轴的数据--
//
axisLine: {
//x轴
show: false
},
axisTick: {
//x轴刻度线
show: false
}
},
toolbox: {
show: true,
feature: {
magicType: { type: ["line", "bar"] }
}
},
color: ["#5fbc68", "#4f9eda", "#2688f9", "#8164fe", "#f8ab31"],
legend: {
type: "scroll", //分页类型
// y: '8%',
right: "15%",
data: (function() {
var list = [];
for (var i = 1; i <= 2000; i++) {
list.push(i + 2000 + "");
}
return list;
})()
},
yAxis: {
type: "value",
name: "kw·h",
axisLine: {
//y轴
show: false
},
axisTick: {
//y轴刻度线
show: false
}
},
series: [ //纵轴的数据
// {
// name: "1",
// data: [820, 932, 901, 934, 1290, 1330, 1320],
// type: "line",
// smooth: true,
// symbol: "none",
// areaStyle: {}
// },
// {
// name: "2",
// data: [820, 932, 901, 934, 1290, 1330, 1320],
// type: "line",
// smooth: true,
// symbol: "none",
// areaStyle: {}
// }
]
},
扫一扫
2433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
