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

Posted 2021-10-30 会飞的一棵树

使用Apache ECharts和echarts-gl实现立体3维地图，且地图区块上有两立体柱展示地区数据，点击区块可获取对应series的data，可选中高亮。使用了geo3d,map3d,bar3d等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);
    });
});

echarts 阻止点击的高亮效果

参考技术A series:

type:pie,

silent:true  //关键句



点击图表，直接跳转新页面，不想要展示点击之后选中扇形的高亮效果。设置 silent为true即可