react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色

地图介绍

做可视化项目时需要3d的区域地图，在网上搜到ECharts社区的一个其他网站，上面有人家写好的图表demo，我是基于上面的一个3D地图修改配置项实现我需要的地图。下面是写好的示例：

区域地图，鼠标移上去自定义颜色，点击取消高亮黄色
地图范围是在阿里云数据可视化 平台获取的
点击选择区域下载json格式的区域经纬度在图表里引入可以

echarts图表引入

通过npm引入

npm install echarts --save

页面引入图表

import * as echarts from ‘echarts’;
这一步相当于引入全部图表了，如果只用到一个图表可以按照官方的教程按需引入
EChart图表官网入口

react页面中引入使用

图表的3D效果，其实是两个地图的错位背景色差，形成的视觉上的3D；

import * as echarts from 'echarts';//引入全部图表
import React, { useEffect, useState, useLayoutEffect } from 'react'
import styles from './Home.module.css';
let myChart, option

export default function Home() {
// echarts地图
    useEffect(() => {
        myChart = echarts.init(document.getElementById('main'));
        myChart.on("click", clickFunc);
        myChart.showLoading();
        myChart.hideLoading();
        echarts.registerMap('HK', xinxiang);//这边引入区域数据文件
        myChart.setOption(
            (option = {
                // backgroundColor: '#042636',
                tooltip: {},
                geo: {//底部背景地图的配置
                    tooltip: {
                        show: true
                    },
                    map: 'HK',
                    aspectScale: 0.75, //长宽比
                    zoom: 1.1,
                    roam: false,
                    itemStyle: {
                        areaColor: '#15e3c9',
                        shadowColor: 'rgba(0,243,255,0.6)',
                        shadowOffsetX: 9,
                        shadowOffsetY: 9,
                        emphasis: {
                            areaColor: '#2AB8FF',
                            borderWidth: 0,
                            // color: 'green',
                            label: {
                                show: false
                            }
                        }
                    },
                },
                series: [{//上面覆盖的地图配置
                    type: 'map',
                    roam: false,
                    label: {
                        show: true,
                        // color: "#FFFFFF",
                        fontSize: 12,
                    },
                    itemStyle: {
                        borderColor: '#05CDD8',
                        borderWidth: 1,
                        areaColor: '#15e3c9',
                        emphasis: {
                            show: false,
                            // borderColor: '#fff',
                            borderWidth: 0.5,
                            areaColor: {
                                x: 1000,
                                y: 1000,
                                x2: 1000,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgb(46,229,206)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(46,229,206)', // 50% 处的颜色
                                    },
                                ],
                                global: true, // 缺省为 false
                            },
                            opacity: 1,
                        },
                    },
                    zoom: 1.1,
                    map: 'HK' //使用
                },
                {
                    type: 'custom',
                    coordinateSystem: 'geo',
                    geoIndex: 0,
                    zlevel: 1,
                    data: [//这三个是标注点的经纬度
                        [113.951509, 35.295743, 100],
                        [114.077852, 35.060022, 30],
                        [113.616426, 35.211636, 80],
                    ],
                    itemStyle: {
                        color: '#a6ff00'
                    },
                    renderItem(params, api) {
                        const coord = api.coord([
                            api.value(0, params.dataIndex),
                            api.value(1, params.dataIndex)
                        ]);
                        const circles = [];
                        for (let i = 0; i < 5; i++) {
                            circles.push({
                                type: 'circle',
                                shape: {
                                    cx: 0,
                                    cy: 0,
                                    r: 30
                                },
                                style: {
                                    stroke: 'red',
                                    fill: 'none',
                                    lineWidth: 2,
                                    stroke: '#1A73E8'
                                },
                                // Ripple animation
                                keyframeAnimation: {
                                    duration: 4000,
                                    loop: true,
                                    delay: (-i / 4) * 4000,
                                    keyframes: [
                                        {
                                            percent: 0,
                                            scaleX: 0,
                                            scaleY: 0,
                                            style: {
                                                opacity: 1
                                            }
                                        },
                                        {
                                            percent: 1,
                                            scaleX: 1,
                                            scaleY: 0.4,
                                            style: {
                                                opacity: 0
                                            }
                                        }
                                    ]
                                }
                            });
                        }
                        return {
                            type: 'group',
                            x: coord[0],
                            y: coord[1],
                            children: [
                                ...circles,
                                {
                                    type: 'path',
                                    shape: {
                                        d: 'M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z',
                                        x: -10,
                                        y: -35,
                                        width: 20,
                                        height: 40
                                    },
                                    style: {
                                        fill: '#00A8E8'
                                    },
                                    // Jump animation.
                                    keyframeAnimation: {
                                        duration: 1000,
                                        loop: true,
                                        delay: Math.random() * 1000,
                                        keyframes: [
                                            {
                                                y: -10,
                                                percent: 0.5,
                                                easing: 'cubicOut'
                                            },
                                            {
                                                y: 0,
                                                percent: 1,
                                                easing: 'bounceOut'
                                            }
                                        ]
                                    }
                                }
                            ]
                        };
                    }
                }
                ],
            })
        );
        option && myChart.setOption(option);
        return () => {
            myChart.dispose();
        }
    }, [])
//echarts地图设置点击事件  点击时高亮关闭换成自定义颜色
    let nwo = ''
    function clickFunc(params) {
        console.log(params);
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: params.dataIndex
        })
        if (params.dataIndex != nwo) {
            //没选中的取消高亮
            myChart.dispatchAction({
                type: "downplay",
                seriesIndex: 0,
                dataIndex: nwo,
            });
        }
        nwo = params.dataIndex;
        // 获取鼠标点击的经纬度
        var pixelPoint = [params.event.offsetX, params.event.offsetY];
        var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
        console.log(dataPoint);
        let longitude = parseInt(dataPoint[0]);
        //这是通过获取到的经纬度进行跳转页面，如果你也需要跳转，需要引入一下react 路由的useNavigate命名为nav来跳转；
        longitude == 113 && nav('/about');
    };

	return（
		<div style={{ height: "950px", width: "900px" }} id="main"></div>
	）
}

如果想要切换颜色可以去官方查看配置项进行更改，不过就是需要一点一点修改，官方每个图表的配置项还是挺更多的。