Scatter SymbolSize Scale with Datazoom

Question

I Want the Scatter's SymbolSize Change larger when zoom in and Change smaller when zoom out, however the default settings allow me to count my own symbolsize but it's always a value which can not change when zoom in or zoom out.

The scatter setting is :

 {
     name: '128025',
     data: data[5],
     type: 'scatter',
     yAxisIndex:0,
     symbolSize: function (data) {
                    return (data[2]*data[1])/50000+5 ;
                  },
     color:'#5470c6',
     symbol:'path://M5822 5148 c-404 -774 -1262 -2462 -1258 -2474 8 -21 2704 -21 2712 0 7 19 -1340 2620 -1359 2624 -11 2 -39 -43 -95 -150z m413 -1535 c215 -256 391 -471 393 -477 2 -10 -76 -62 -82 -54 -58 80 -703 858 -712 858 -7 0 -84 -105 -171 -233 l-158 -233 -40 12 c-22 6 -39 16 -38 21 3 14 406 573 412 572 3 0 182 -210 396 -466z',
},

And I have tried the custom type's return_rect, which can Change size with zoom in an zoom out:

function renderItem(params, api) {
          var categoryIndex = api.value(1);
          var start = api.coord([api.value(0), categoryIndex]);
          var height = api.size([api.value(3)-api.value(0), api.value(2)/100]);
          //console.log(start,end);
          // console.log(params);
          console.log(start,height);
          var ret = {
            type :'rect',
            shape:{
              x:start[0],y:start[1],width:height[0],height:height[1]
            },
            style:{
              fill:'#91cc75',
              opacity:0.2
            }
        };
          return  ret;
        }

And the setting is:

{
              type: 'custom',
              renderItem: renderItem,
              itemStyle: {
                opacity: 0.1
              },
              encode: {
                x: 0,
                y: 1
              },
              data: data[10],
              silent:true,
            },

I was wondering how can I set the scatter settings to realize the zoon-in-change like the custom which i implement by myself.

Answer 1

You can listen to the datazoom event and adjust the symbolSize based on the resulting axis interval via setOption:

Online Example

import * as echarts from 'echarts';

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

let data = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];

option = {
  toolbox: {
    feature: {
      dataZoom: {},
      restore: {}
    }
  },
  tooltip: {},
  xAxis: {},
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: data,
      symbolSize: 10,
      color: '#5470c6',
      symbol:
        'path://M5822 5148 c-404 -774 -1262 -2462 -1258 -2474 8 -21 2704 -21 2712 0 7 19 -1340 2620 -1359 2624 -11 2 -39 -43 -95 -150z m413 -1535 c215 -256 391 -471 393 -477 2 -10 -76 -62 -82 -54 -58 80 -703 858 -712 858 -7 0 -84 -105 -171 -233 l-158 -233 -40 12 c-22 6 -39 16 -38 21 3 14 406 573 412 572 3 0 182 -210 396 -466z'
    }
  ]
};

myChart.on('datazoom', function (params) {
  console.log(params); // log event to look at its structure
  const xAxisZoom = params.batch[0];
  const xAxisLength = xAxisZoom.endValue - xAxisZoom.startValue;
  let newSymbolSize = (1 / xAxisLength) * 50;
  myChart.setOption({
    series: [
      {
        symbolSize: newSymbolSize
      }
    ]
  });
});

option && myChart.setOption(option);

Dont know if this is the best solution performance wise. I think a visual map (Handbook, Documentation) might be a better option but I couldnt find where the axis borders or zoom variables are stored to use them for the size calculation.