Echarts立体地图加3D柱图可点击可高亮选中的开发

注意

1. echarts请使用v5.1.0以上版本，低版本会无法显示，或者无法触发点击事件。
2. 若有闪屏bug，不要设置temporalSuperSampling属性。
3. 注意图层顺序。
   

实现原理

借助 echarts 和 echarts-gl：

1. 实现立体地图使用geo3d。
2. 立体柱图使用bar3d。
3. 在geo3d的这层click事件无法触发，遂在其上添加map3d层。
4. map3d无选中的配置，dispatchAction触发highlight,select对其不生效。变通办法：将map3d层设为透明，通过动态设置geo3d层的regions达到选中高亮的效果。

主要代码实现

预览地址：https://www.makeapie.com/editor.html?c=xelBBd_iFR&v=1
具体细节可看注释及代码。

// 部分测试数据
var originalDatas = {
    dataMap: [
        { name: '目标数', field: 'mbs', unit: '万人' },
        { name: '完成数', field: 'wcs', unit: '万人' },
    ],
    datas: [
        {
            adcode: 330100,
            name: '杭州市',
            lng: '119.053576',
            lat: '29.887459',
            wcs: 10,
            mbs: 50,
            wcl: 100,
        }
}
// zjJsonUrl为地图的geoJson
$.get(zjJsonUrl, (res) => {
    echarts.registerMap('map', res);

    var series = [
        {
            type: 'map3D',
            map: 'map',
            // 设置为透明
            itemStyle: {
                color: [1, 1, 1, 0],
            },
            emphasis: {
                itemStyle: {
                    color: [1, 1, 1, 0],
                },
            },
            data: originalDatas.datas,

            viewControl: {
                beta: 45, //x轴旋转
                alpha: 45, //Y轴旋转
            }
        },
    ];

    $.each(originalDatas.dataMap, function (i, seriesItem) {
        series.push({
            name: seriesItem.name,
            type: 'bar3D',
            coordinateSystem: 'geo3D',
            shading: 'lambert',
            label: {
                show: true,
                position: 'top',
                formatter: (params) => {
                    return params.value[2];
                },
            },
            data: originalDatas.datas.map((item) => {
                item.value = [
                    i == 0 ? item.lng - 0 + 0.05 : item.lng - 0.05,
                    item.lat,
                    item[seriesItem.field],
                    seriesItem.unit,
                ];
                return JSON.parse(JSON.stringify(item));
            }),
            barSize: 2,
            minHeight: 1,
            itemStyle: {
                color: i == 0 ? '#FFB239' : '#5E5FFF',
            },
            emphasis: {
                label: { show: true },
            },
            // zlevel: i
        });
    });

    option = {
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                if (params.seriesType == 'bar3D') {
                    return [params.seriesName, params.name + '：' + params.value[2] + (params.value[3] || '')].join(
                        '<br />'
                    );
                }
            },
        },
        geo3D: {
            show: true,
            map: 'map',

            viewControl: {
                beta: 45, //x轴旋转
                alpha: 45, //Y轴旋转
                panMouseButton: 'right', //平移操作使用的鼠标按键
                rotateMouseButton: 'left', //旋转操作使用的鼠标按键
            },
            light: {
                main: {
                    color: '#ffffff',
                    intensity: 1,
                    shadow: false,
                },
            },
            itemStyle: {
                color: '#4D96FA',
                borderWidth: 1,
                borderColor: '#fff',
                opcity: 1,
            },

            shading: 'realistic',
            label: {
                show: true,
                color: '#fff',
                distance: 5,
            },
            emphasis: {
                label: { show: true },
                itemStyle: { color: '#36A8FF' },
            },
            groundPlane: false,
            data: originalDatas.datas,
            // 将geo3d放在最底层
            zlevel:-1
        },
        series: series,
    };

    myChart.setOption(option);
    myChart.off('click');
    myChart.on('click', function (params) {
        // 点击获取data中的数据
        console.log(params);
        // 设置选中高亮
        let regions = [
            {
                itemStyle: { color: '#36A8FF', opacity: 1 },
                label: { show: true },
            },
        ];
        regions[0].name = params.name;
        option.geo3D.regions = regions;
        myChart.setOption(option);
    });
});