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
鑒於makeapie已經沒了，重新在JSRun中更新了下預覽，有相對完整的代碼，有需要的朋友可以參考：https://jsrun.net/UPsKp

具體細節可看注釋及代碼。

// 部分測試數據
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,
        }
  ]
}

var myChart = echarts.init(document.getElementById('echart'));
// 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);
    });
});