ecomfe / echarts-gl

Extension pack for Apache ECharts, providing globe visualization and 3D plots.
BSD 3-Clause "New" or "Revised" License
2.6k stars 844 forks source link

geo3D 和 series 同时使用时点击事件重复调用 #153

Open kyriejoshua opened 6 years ago

kyriejoshua commented 6 years ago

echarts v3.8.5 echarts-gl v beta.6

给 chart 绑定 click 事件,然后发现点击时,回调事件会重复调用。

经检查是和 zlevel 相关,有多个不同的 zlevel 点击事件就会调用几次,但是参数是一样的。

var option = {
  backgroundColor: '#08366a',
  title: {
    left: 'center',
    textStyle: {
      color: 'red',
      fontSize: 'blue'
    }
  },
  geo3D: {
    type: 'map',
    map: 'china',
    boxWidth: 100,
    boxHeight: 10,
    boxDepth: 'auto',
    shading: 'color',
    environment: '#000', // 空间
    groundPlane: { // 沙盘
      show: true,
    },
    label: { // 区域标签
      show: false,
      textStyle: {
        opacity: 0.7,
        backgroundColor: 'rgba(255,255,255,0)',
      }
    },
    regionHeight: 2,
    itemStyle: { // 区域
      borderColor: '#007eca',
      borderWidth: 0.4,
      areaColor: '#007eca',
      opacity: 0.7
    },
    emphasis: { // 区域悬停
      label: {
        show: true,
      },
    },
    tooltips: {
      trigger: 'item'
    },
    viewControl: {
      alpha: 40,
      zoomSensitivity: 0,
      rotateSensitivity: 0,
      panSensitivity: 0,
      autoRotate: false,
      projection: 'perspective',
    },
  },
  series: [
    {
    name: name,
    type: 'lines3D',
    coordinateSystem: 'geo3D',
    geo3DIndex: 0,
    zlevel: 2,
    effect: {
      show: true,
      trailWidth: 0,
      trailLength: 0.15,
      trailOpacity: 1,
    },
    lineStyle: {
      color: '#24f7ff',
      width: 1,
      opacity: 0.6,
    },
    blendMode: 'lighter',
    data: defaultLinesData.dataLines
  },
    {
    name: name,
    type: 'lines3D',
    coordinateSystem: 'geo3D',
    geo3DIndex: 0,
    zlevel: 3,
    effect: {
      show: true,
      trailWidth: 5,
      trailLength: 0.15,
      trailOpacity: 1,
    },
    lineStyle: {
      color: '#24f7ff',
      width: 5,
      opacity: 0.1,
    },
    blendMode: 'lighter',
    data: defaultLinesData.dataLines
  },
  {
    name: name,
    type: 'scatter3D',
    geo3DIndex: 0,
    coordinateSystem: 'geo3D',
    zlevel: 1,
    symbolSize: 15,
    itemStyle: {
      color: '#0dd4ff',
      opacity: 0.5
    },
    blendMode: 'lighter',
    data: defaultLinesData.dataPoints
  }
],
};

myChart.on('click', function(p) {
  console.info('click me')
})

这里的 click 事件会调用四次,参数是一样的。

全部代码 codepen

houxieyu commented 6 years ago

你真幸福,有四个,我用geo3d进不了click事件,似乎gl还没有支持