Open nikeshparajuli opened 1 year ago
Please provide a demo for the issue either with Official Editor, CodePen, CodeSandbox or JSFiddle.
I have the same issue, but it only happens on larger datasets in my case (over 20.000 - 30.000 datapoints)
It seems like there is a problem with the loading/rendering of the chart after dragging around the slider, setting realtime: false
datazoom.slider.realtime slightly improves this behavior, but when the dataset gets bigger the issue still persist.
Version/Enviroment:
Steps to reproduce:
Or:
drag around with the slider and than disable all the series, some lines and points should be still visiable
let base = +new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
let lineChartData1 = [];
let lineChartData2 = [];
let scatterChartData1 = [];
let scatterChartData2 = [];
for (let i = 1; i < 20000; i++) {
var now = new Date((base += oneDay));
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
lineChartData1.push(Math.round((Math.random() - 0.5) * 20));
lineChartData2.push(Math.round((Math.random() - 0.5) * 20));
scatterChartData1.push([i, i]);
scatterChartData2.push([i, i]);
}
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
legend: {},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: date
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 10
},
{
start: 0,
end: 10
}
],
series: [
{
name: 'Line Chart 1',
type: 'line',
symbol: 'none',
itemStyle: {
color: 'rgb(255, 70, 131)',
},
data: lineChartData1,
},
{
name: 'Line Chart 2',
type: 'line',
symbol: 'none',
itemStyle: {
color: 'rgb(70, 131, 255)',
},
data: lineChartData2,
},
{
name: 'Scatter Chart 1',
type: 'scatter',
symbolSize: 8,
itemStyle: {
color: 'rgb(255, 0, 0)',
},
data: scatterChartData1,
},
{
name: 'Scatter Chart 2',
type: 'scatter',
symbolSize: 8,
itemStyle: {
color: 'rgb(0, 255, 0)',
},
data: scatterChartData2,
},
],
};
when the renderer is svg, the issue is gone, but the chart gets so slow that it is not usable anymore
@DanielZellner I couldn't get around this issue with the xAxis type being set to category
(which is what I had initially). So I changed the xAxis to be of type value
and I don't have these issues anymore. The data structure we provide to the series data
will now be a 2D array (number[][]) instead of just a single dimensional array (number[]). I've only gone as far as ~10k data points and it seems to be ok handling that. No annoying stale renders.
@nikeshparajuli thank you for your response, but the things you mentioned have I already tried or is already built in. My issue is that my data can go up to 80.000 to 100.000 data points, depending on the date range. Up to 10.000 data points, I also do not get this issue, but as more data loads in as more stale renders are happening. Is there maybe a configuration that could help with this issue, besides using svg as renderer, @Ovilia? All animations are already in my code disabled, realtime is to false as well, I tried throttle, but it did not make any difference, svg is also not helping, because my memory usage goes up to 500mb and everytime you slide around the slider, echarts needs 10 seconds or more to load the data again.
Maybe something to mention is that I use a 2D chart, but like in my first response, my array has for each entry 4 values, so when I talk about 80.000 to 100.000 data points, those are actually 320.000 - 400.000, well I know that it makes it not better
@Ovilia I checked the issue again, since there was a new echarts update. Issue is still not resolved.
Version
5.4.1
Link to Minimal Reproduction
No response
Steps to Reproduce
Drag data zoom slider all the way to the left from right
Drag data zoom slider to the right to expand selection
Drag back and forth again to see multiple stale rendering
Current Behavior
Creates multiple stale renders
Expected Behavior
Should render only once after data zoom
Environment
Any additional comments?
All are same curve but rendered multiple times (some go away on hover):
Just curious if anyone has come across this? The steps I used for recreating are for smaller data sets. For larger data sets, you don't have to drag all the way to the left to see this. It happens as soon as you drag the x-axis slider to any position.