echarts-gl icon indicating copy to clipboard operation
echarts-gl copied to clipboard

[BUG] visualMap not applying correctly for scatterGL with progressive Rendering

Open MatthiasMert opened this issue 9 months ago • 1 comments

Just wanted to document the very strange behaviour of scatterGL + visualMap + progressive rendering

Example:

import * as echarts from 'echarts';
import 'echarts-gl';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const data = Array.from(Array(5000), (x, i) => [i, Math.random() * 100]);

option = {
  xAxis: {},
  yAxis: {},
  visualMap: {
    min: 0,
    max: 100,
    dimension: 1,
    text: ['HIGH', 'LOW'],
    calculable: true,
    inRange: {
      color: ['blue', 'green', 'yellow', 'red']
    }
  },
  series: [
    {
      type: 'scatterGL',
      data: data,
      symbolSize: 5,
      progressiveThreshold: 100,
      progressive: 1000
    }
  ]
};

option && myChart.setOption(option);

VisualMap is only applying correctly for the first progressivly rendered block (until datapoint 1000). Afterwards visualMap seems to be apllied randomly. Issue becomes more clear when moving the handle on the visualMap component to filter data. (also shows up on the internal progressiveThreshold of 100000 if not set)

MatthiasMert avatar May 03 '24 12:05 MatthiasMert