飞线图，每个point能否增加点击事件，点击可以跳转到第二层级的飞线图

[Miazzy]

Feature request

这个特性解决了什么问题？

这个特性的实现形式？

是否愿意为此特性提交PR？

[Miazzy]

添加点击事件，点击显示tips，或者跳入下一层级的飞线图

[liaozengxiang]

很有用，希望能加上这个功能

[ch1035063420]

你好，请问点击事件的问题您解决了吗

[hfxf]

这个可以吗 确实有必要

[dongongfeiyu]

请问解决了吗？

[zjqwll]

保持联系哦~

[hfxf]

只是能调用图对应区域的 click事件（在最后），你可以在click事件中进行图的切换<template>

<script> import cz_json from '../../static/cz.json'

export default { data() { return { myChart: null } }, mounted() { this.chartint(); this.chartref(); }, methods: { chartint() { this.myChart = this.$echarts.init(document.getElementById("container")); window.addEventListener("resize", () => { this.myChart.resize(); }); }, beforeDestroy() { window.removeEventListener("resize", () => { this.myChart.resize(); }); }, chartref() { let mydata = cz_json; this.$echarts.registerMap('CZ', mydata); this.myChart.setOption({ geo: { roam: true, show:true, type:'map', map: 'CZ', zoom: 1, label: { emphasis: { // 对应的鼠标悬浮效果 show: true, textStyle: {

                }
              }
            },
            itemStyle: {
              normal: {

              },
              emphasis: {

              }
            }
          },
          series: [
            {
              show:true,
              type:'effectScatter',
              rippleEffect:{   // 涟漪特效相关配置。
                scale:4    // 控制涟漪大小
              },
              coordinateSystem: 'geo', // series坐标系类型
              data:[
                 [117.887345,38.313843],[117.883985625,38.307202375],[117.857423125,38.293764875],[117.847345,38.273843],[117.839693632813,38.2604201484375],[117.799693632813,38.2754970527344],[117.787345,38.2538430000001],[117.761793242188,38.2582900214844],[117.719429960938,38.2745729804688],[117.615538359375,38.2882900214844],[117.601085234375,38.2539833808594],[117.60302859375,38.2383449531251],[117.577486601563,38.2275820136719],[117.562183867188,38.2294850898438],[117.491275664063,38.2133791328126],[117.412345,38.2231960273438],[117.370582304688,38.218001935547],[117.373013945313,38.1984828925782],[117.361793242188,38.1793959785157],[117.352896757813,38.1582900214844],[117.347345,38.153843],[117.307642851563,38.1603652167969],[117.292027617188,38.1580568671876],[117.242662382813,38.1796291328125],[117.203487578125,38.1738393378906],[117.192095976563,38.2016664863281],[117.15170046875,38.2181996894532],[117.14298953125,38.2294863105469],[117.137345,38.233843],[117.13185671875,38.2487892890625],[117.142764921875,38.2886403632813],[117.141944609375,38.298843],[117.143551054688,38.318843],[117.119722929688,38.3294753242187],[117.0980871875,38.3545864082032],[117.080738554688,38.3695351386719],[117.103780546875,38.3893862128907],[117.078619414063,38.4344838691407],[117.111846953125,38.4813491035156],[117.09197390625,38.4984706855469],[117.08271609375,38.5292153144532],[117.077345,38.543843],[117.08298953125,38.5481996894531],[117.097345,38.583843],[117.11326296875,38.5879274726563],[117.14267703125,38.6070839667969],[117.147345,38.613843],[117.183170195313,38.6180178046876],[117.220518828125,38.6465407539063],[117.231519804688,38.6180178046876],[117.245186796875,38.6082228828126],[117.235875273438,38.561108625],[117.259386015625,38.5564638496094],[117.29279421875,38.5701918769532],[117.302115507813,38.5571865058594],[117.343170195313,38.5680178046875],[117.357345,38.5877956367188],[117.374132109375,38.5643727851562],[117.393170195313,38.5780178046875],[117.40314578125,38.5919350410157],[117.48187625,38.6158522773438],[117.529386015625,38.6064638496094],[117.547345,38.613843],[117.567896757813,38.5954811835938],[117.622061796875,38.4985622382813],[117.642628203125,38.4691237617188],[117.687784453125,38.3981179023438],[117.735714140625,38.3444777656251],[117.828048125,38.3060732246094],[117.860240507813,38.3235683417969],[117.887345,38.313843]
               // [117.887345,38.313843],[117.890767851563,38.3260353828125],[117.899537382813,38.3172658515626],[117.887345,38.313843]
              ]  //散点的坐标，自己定义一个var即可
            }
          ],
          tooltip: {
            trigger: 'item',
            formatter: function(params) {

              return res;
            }
          }
        });
        var myct=this.myChart;
        myct.on('click', function (params) {
          let componentType = params.componentType;   // geo是地图图层
          //console.log(params.componentType);
          let offsetX = params.event.offsetX;
          let offsetY = params.event.offsetY;
          let zuobiao =myct.convertFromPixel('series', [offsetX, offsetY]); // 转换成坐标(经纬度)
          console.log(zuobiao);
          //console.log(offsetX+":"+offsetY);
        });


  }
}

Message ID: @.***>

[hfxf]

只是能调用图对应区域的 click事件（在最后），你可以在click事件中进行图的切换<template>

<script> import cz_json from '../../static/cz.json'

export default { data() { return { myChart: null } }, mounted() { this.chartint(); this.chartref(); }, methods: { chartint() { this.myChart = this.$echarts.init(document.getElementById("container")); window.addEventListener("resize", () => { this.myChart.resize(); }); }, beforeDestroy() { window.removeEventListener("resize", () => { this.myChart.resize(); }); }, chartref() { let mydata = cz_json; this.$echarts.registerMap('CZ', mydata); this.myChart.setOption({ geo: { roam: true, show:true, type:'map', map: 'CZ', zoom: 1, label: { emphasis: { // 对应的鼠标悬浮效果 show: true, textStyle: {

                }
              }
            },
            itemStyle: {
              normal: {

              },
              emphasis: {

              }
            }
          },
          series: [
            {
              show:true,
              type:'effectScatter',
              rippleEffect:{   // 涟漪特效相关配置。
                scale:4    // 控制涟漪大小
              },
              coordinateSystem: 'geo', // series坐标系类型
              data:[
                 [117.887345,38.313843],[117.883985625,38.307202375],[117.857423125,38.293764875],[117.847345,38.273843],[117.839693632813,38.2604201484375],[117.799693632813,38.2754970527344],[117.787345,38.2538430000001],[117.761793242188,38.2582900214844],[117.719429960938,38.2745729804688],[117.615538359375,38.2882900214844],[117.601085234375,38.2539833808594],[117.60302859375,38.2383449531251],[117.577486601563,38.2275820136719],[117.562183867188,38.2294850898438],[117.491275664063,38.2133791328126],[117.412345,38.2231960273438],[117.370582304688,38.218001935547],[117.373013945313,38.1984828925782],[117.361793242188,38.1793959785157],[117.352896757813,38.1582900214844],[117.347345,38.153843],[117.307642851563,38.1603652167969],[117.292027617188,38.1580568671876],[117.242662382813,38.1796291328125],[117.203487578125,38.1738393378906],[117.192095976563,38.2016664863281],[117.15170046875,38.2181996894532],[117.14298953125,38.2294863105469],[117.137345,38.233843],[117.13185671875,38.2487892890625],[117.142764921875,38.2886403632813],[117.141944609375,38.298843],[117.143551054688,38.318843],[117.119722929688,38.3294753242187],[117.0980871875,38.3545864082032],[117.080738554688,38.3695351386719],[117.103780546875,38.3893862128907],[117.078619414063,38.4344838691407],[117.111846953125,38.4813491035156],[117.09197390625,38.4984706855469],[117.08271609375,38.5292153144532],[117.077345,38.543843],[117.08298953125,38.5481996894531],[117.097345,38.583843],[117.11326296875,38.5879274726563],[117.14267703125,38.6070839667969],[117.147345,38.613843],[117.183170195313,38.6180178046876],[117.220518828125,38.6465407539063],[117.231519804688,38.6180178046876],[117.245186796875,38.6082228828126],[117.235875273438,38.561108625],[117.259386015625,38.5564638496094],[117.29279421875,38.5701918769532],[117.302115507813,38.5571865058594],[117.343170195313,38.5680178046875],[117.357345,38.5877956367188],[117.374132109375,38.5643727851562],[117.393170195313,38.5780178046875],[117.40314578125,38.5919350410157],[117.48187625,38.6158522773438],[117.529386015625,38.6064638496094],[117.547345,38.613843],[117.567896757813,38.5954811835938],[117.622061796875,38.4985622382813],[117.642628203125,38.4691237617188],[117.687784453125,38.3981179023438],[117.735714140625,38.3444777656251],[117.828048125,38.3060732246094],[117.860240507813,38.3235683417969],[117.887345,38.313843]
               // [117.887345,38.313843],[117.890767851563,38.3260353828125],[117.899537382813,38.3172658515626],[117.887345,38.313843]
              ]  //散点的坐标，自己定义一个var即可
            }
          ],
          tooltip: {
            trigger: 'item',
            formatter: function(params) {

              return res;
            }
          }
        });
        var myct=this.myChart;
        myct.on('click', function (params) {
          let componentType = params.componentType;   // geo是地图图层
          //console.log(params.componentType);
          let offsetX = params.event.offsetX;
          let offsetY = params.event.offsetY;
          let zuobiao =myct.convertFromPixel('series', [offsetX, offsetY]); // 转换成坐标(经纬度)
          console.log(zuobiao);
          //console.log(offsetX+":"+offsetY);
        });


  }
}

Message ID: @.***>