What problem does this feature solve?
对于系列特别多的情况，通常会使用legend.selected将那些不重要（但是必须得有）的系列给隐藏掉，借此来优化显示效果和渲染性能。但是实践发现，虽然隐藏掉系列会带来一些性能提升，但是在大数据量的情况下性能依然糟糕。
实验1：1000个系列
- 只保留一个选中，其他都隐藏：耗时434ms
- 全部选中：耗时788ms
实验2：1个系列
- 全部选中：29ms
代码如下：
// 生成1000个系列
const ids = Array.from(Array(1000), (_, i) => {
return `指标${i}`
})
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ids,
// 只保留第一个选中，其他都不选中
selected: ids.slice(1).reduce((base, next) => {
base[next] = false
return base
}, {}),
type: 'scroll',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
...ids.map(id => {
return {
name: id,
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
}
})
]
};What does the proposed API look like?
不管有多少个系列，图表的渲染时间只跟“显示”的系列的数量相关。
What problem does this feature solve?
对于系列特别多的情况，通常会使用
legend.selected将那些不重要（但是必须得有）的系列给隐藏掉，借此来优化显示效果和渲染性能。但是实践发现，虽然隐藏掉系列会带来一些性能提升，但是在大数据量的情况下性能依然糟糕。实验1：1000个系列
实验2：1个系列
代码如下：
What does the proposed API look like?
不管有多少个系列，图表的渲染时间只跟“显示”的系列的数量相关。