当前位置 博文首页 > 程序员石磊:echarts gl 3d地图,click事件失效,解决办法

    程序员石磊:echarts gl 3d地图,click事件失效,解决办法

    作者:[db:作者] 时间:2021-07-04 18:49

    问题

    比如点击四川,进行下钻,需要获取点击区域的name属性,根据name进而异步获取四川的地图的json,如下图所示:
    在这里插入图片描述

    echart和gl版本

    • Loaded claygl, version 1.2.1
    • echarts-gl.min.js:1 Loaded echarts, version 4.6.0

    事件绑定写法

    myChart.on('click', function (clickparams) {
            console.log(clickparams);
            
        });
    

    没法触发事件

    网上找另外一个写法

    myChart.getZr().on('click', function (clickparams) {
            console.log(clickparams);
            show(clickparams);
            
        });
    

    只能获取到点击的x.y坐标,获取不到点击区域的名称,满足不了需求,崩溃,搞了好久, 后来去github issues上,果然很多人遇到这个问题,是个bug。

    换个版本试试,

    https://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js

    用这个版本可,再配合

    myChart.on('click', function (clickparams) {
            console.log(clickparams);
            
        });
    

    可以实现触发,并获取点击区域的name,但是我之前调好的地图蓝色变白色了,好吧,总不能去研究源码吧?

    变通解决办法

    点击柱状图进行,可以触发click,就这样吧!!

    cs