echarts gl 加载 map3D click事件失效问题及解决方法.geo3D

使用echarts加载map3D,如果配置了3D柱状图以及气泡图,ECHARTS监听不到地图板块点击事件,只能监听到SERIES里面的数据,如果将地图放到series中无法高亮选中的地图。
解决思路是同时加载地图板块和series,然后将板块地图颜色设置为透明,通过点击修改option的geo3D来进行高亮。

实现代码

let myChart = echarts.init(dom);

echarts.registerMap('shanghai', mapJson); //注册地图;

let options = {
      backgroundColor: '#0f375f',
      geo3D: { //加载geo3D
        map: 'shanghai',
        itemStyle: {
          color: "rgba(1, 16, 31, 0)", //将geo3d数据设置为透明
          opacity: 0, //透明
          borderColor: "rgba(1, 16, 31, 0)",
          borderWidth: 0
        },
      },
      series: [{
        type: 'map3D', //加载series数据
        map: 'shanghai',
        itemStyle: {
          color: "rgba(1, 16, 31, .2)",
          opacity: 1,
          borderColor: "rgba(1, 16, 31, .6)",
          borderWidth: 1
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true
          },
          itemStyle: {
            color: "rgba(1, 16, 31, 1)",
            opacity: 1
          }
        },
        // shading: 'color',
        zlevel: 1
      }]
    }
myChart.setOption(options);

//  监听
myChart.on("click",params=>{
    let option = this.chart.getOption();
    let list = option.geo3D[0].regions;
    //清空上次选中
    list = list.map(el => {
      delete el.itemStyle
      delete el.label
      return el
    });
    //找到选中的地图,并设置高亮
    let result = list.find(el => el.name === name);
    if(result){
      result.itemStyle = {
        color: '#ff0',
        opacity: 1
      };
      result.label = {
        show: true
      }
      this.chart.setOption(option);
    }

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。