apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.61k stars 19.62k forks source link

Get the index of "coords" for series type "lines" #18042

Open krabouilleur opened 1 year ago

krabouilleur commented 1 year ago

What problem does this feature solve?

If I click on a "line" created by "coords" in a serie of type "lines", I can't know what "coords" index is clicked :

for example :

var mousePosition = null;

$.get(
  ROOT_PATH + '/data/asset/geo/MacOdrum-LV5-floorplan-web.svg',
  function (svg) {
    echarts.registerMap('MacOdrum-LV5-floorplan-web', { svg: svg });
    option = {
      tooltip: {
        triggerOn: 'none'
      },
      geo: {
        map: 'MacOdrum-LV5-floorplan-web',
        roam: true
      },
      series: [
        {
          name: 'Route',
          type: 'lines',
          coordinateSystem: 'geo',
          geoIndex: 0,
          polyline: true,
          lineStyle: {
            color: '#c46e54',
            width: 5,
            opacity: 1,
            type: 'dotted'
          },
          tooltip: {
            trigger: 'item',
            position: function (pos, params, dom, rect, size) {
              return mousePosition;
            },
            formatter: function (params) {
              return params.seriesName;
            }
          },
          data: [
            {
              coords: [
                [61.58708083147317, 386.87942320312504],
                [61.58708083147317, 72.8954315876116],
                [258.29514854771196, 72.8954315876116]
              ]
            }
          ]
        }
      ]
    };
    myChart.setOption(option);
  }
);

myChart.on('mouseover', 'series.lines', function (params) {
  console.log('MOUSE', params)
  mousePosition = [params.event.offsetX, params.event.offsetY];

  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: params.seriesIndex,
    dataIndex: params.dataIndex
  });
});

myChart.on('click', 'series.lines', function(params) {
  console.log('I DON\'T KNOW WHICH "coords" index is clicked')
});

What does the proposed API look like?

what it would be best:

  1. if I click on the line (or mouseover) generated by coords on a type "lines" series,
  2. the "params" response should have a property "coords" which give the 2 coords between the line
  3. eg. coords: coords: [ [61.58708083147317, 386.87942320312504], [61.58708083147317, 72.8954315876116] ]

example of use case: I want to add "coords" when I click on a line "coords", so if could add a coords between two existing coords

helgasoft commented 1 year ago

Why not "divide and conquer" ? Split polyline into important segments with their own names/data. Demo Code