echarts 在geo中lines的emphasis没有效果

佛岸范
  • 1
新手上路,请多包涵

在echarts中的地图中,使用lines,想要实现鼠标移上去的高亮和虚化其他series
series是scatter的可以实现。

$.get(ROOT_PATH + '/data/asset/geo/Map_of_Iceland.svg', function (svg) {
  echarts.registerMap('iceland_svg', { svg: svg });
  option = {
    tooltip: {},
    geo: {
      tooltip: {
        show: true
      },
      selectedMode: true,
      emphasis: {
          focus: 'series',
          blurScope: 'coordinateSystem',
          itemStyle: {
            color: 'yellow'
          }
      },
      map: 'iceland_svg',
      roam: true,
      select: {
        itemStyle: {
          color: '#b50205'
        }
      }
    },
    series: [
      {
      type: 'lines',
      name:  '111',
      coordinateSystem: 'geo',
      geoIndex: 0,
      symbolSize: function (params) {
        return (params[2] / 100) * 15 + 5;
      },
      polyline: true,
      lineStyle: {
        width: 4
      },
      emphasis: {
        focus: 'series',
        blurScope: 'coordinateSystem'
      },
      encode: {
        tooltip: 2
      },
      data: [{
        coords: [
        [488.2358421078053, 459.70913833075736, 100],
        [770.3415644319939, 757.9672194986475, 30],
        [1180.0329284196291, 743.6141808346214, 80],
        [894.03790632245, 1188.1985153835008, 61],
        [1372.98925630313, 477.3839988649537, 70],
        [1378.62251255796, 935.6708486282843, 81]
      ]
      }]
      // data: [
      //   [488.2358421078053, 459.70913833075736, 100],
      //   [770.3415644319939, 757.9672194986475, 30],
      //   [1180.0329284196291, 743.6141808346214, 80],
      //   [894.03790632245, 1188.1985153835008, 61],
      //   [1372.98925630313, 477.3839988649537, 70],
      //   [1378.62251255796, 935.6708486282843, 81]
      // ]
    }, {
      type: 'lines',
      name:  '222',
      coordinateSystem: 'geo',
      geoIndex: 0,
      symbolSize: function (params) {
        return (params[2] / 100) * 15 + 5;
      },
      
      emphasis: {
        focus: 'series',
        blurScope: 'coordinateSystem'
      },
      encode: {
        tooltip: 2
      },
      polyline: true,
      lineStyle: {
        width: 5
      },
      data: [{
        coords: [
        [100, 100, 100],
        [100, 300, 80],
        [100, 500, 60],
        [100, 700, 41],
        [100, 900, 20],
        [100, 1100, 1]
      ]
      }]
    }
  ]
  };
  myChart.setOption(option);
  myChart.getZr().on('click', function (params) {
    var pixelPoint = [params.offsetX, params.offsetY];
    var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
    console.log(dataPoint);
  });
});

这是在官网的例子上直接修改的。
舅舅孩子吧!!!!

回复
阅读 560
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏