helgasoft
commented
10 months ago the 'lttb' setting sometimes skips the extreme Value point, so we can't use it
Docs says "lttb ... will keep the trends and extremas." - so this does not work in your scenario? Any data example? If proved, that means a bug.
OTOH several things could be improved, or at least experimented:
- data is timestamps, so it is natural to use
xAxis.type='time'instead of 'category' - use dataset instead of data, use dataZoom to peek through
- hide symbol since
tooltip.trigger:'axis'will show symbols anyway, then performance becomes very good - if you need symbol - maybe use series 'scatter' instead of 'line' since 20K symbols are so close together
- best to use 'scatterGL' for max response speed - Demo Code with 200K points
webWine
Version
5.4.3
Link to Minimal Reproduction
let base = +new Date(1968, 9, 3); let oneDay = 24 3600 1000; let date = []; let data = [Math.random() 300]; for (let i = 1; i < 20000; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); data.push(Math.round((Math.random() - 0.5) 20 + data[i - 1])); } option = { tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; } }, title: { left: 'center', text: 'Large Area Chart' }, xAxis: { type: 'category', boundaryGap: false, data: date }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, series: [ { name: 'Fake Data', type: 'line', symbol: 'emptyCircle', symbolSize:9, showAllSymbol:true, showSymbol:true, itemStyle: { color: 'rgb(255, 70, 131)' }, data: data } ] };
Steps to Reproduce
let base = +new Date(1968, 9, 3); let oneDay = 24 3600 1000; let date = []; let data = [Math.random() 300]; for (let i = 1; i < 20000; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); data.push(Math.round((Math.random() - 0.5) 20 + data[i - 1])); } option = { tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; } }, title: { left: 'center', text: 'Large Area Chart' }, xAxis: { type: 'category', boundaryGap: false, data: date }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, series: [ { name: 'Fake Data', type: 'line', symbol: 'emptyCircle', symbolSize:9, showAllSymbol:true, showSymbol:true, itemStyle: { color: 'rgb(255, 70, 131)' }, data: data } ] };
Current Behavior
After using the above configuration, the page will become very laggy. I know that there will be some optimization after setting 'lttb', but in our usage scenario, we need to display the full amount of data, and the 'lttb' setting sometimes skips the extreme Value point, so we can't use it, but even if 'lttb' is turned on, when there are multiple line graphs, there will be lag even if the 'symbol' on each line is rare.
Expected Behavior
In the big data scenario, this lag problem can be optimized. In our scenario, up to 12 lines will be set, each line has 11,000 pieces of data.
Environment
Any additional comments?
No response