效果图：

下载echarts

npm i echarts@4.9.0

导入

import * as echart from 'echarts'

html结构

<div style="width: 19.2rem; height: 10.8rem" id="chongqing-map"></div>

引入重庆的json文件

const dt = require('echarts/map/json/province/chongqing.json')

methods事件
areas数据是通过调用后端接口得到

// 重庆地图
        chongqingMap(areas) {
            var myChart = echart.init(document.getElementById('chongqing-map'))
            echart.registerMap('dt', dt)
            const bgColors = [
                ['#1770b5', '#0f6db2'], // '万州区'
                ['#2e779e', '#2a7da0'], // '涪陵区'
                ['#2a9fcb', '#229ecb'], // '渝中区'
                ['#1fabd5', '#219dc9'], // '大渡口区'
                ['#23a0cf', '#2eaedc'], // '江北区'
                ['#24a1cf', '#27a3d3'], // '沙坪坝区'
                ['#249fce', '#239ac9'], // '九龙坡区'
                ['#23a1cf', '#2eafdd'], // '南岸区'
                ['#17a7be', '#18a2b8'], // '北碚区'
                ['#337ba2', '#3389ae'], // '綦江区'
                ['#1982b4', '#1e6098'], // '大足区'
                ['#1ea8d1', '#219eca'], // '渝北区'
                ['#5197d2', '#5298d3'], // '巴南区'
                ['#2081b5', '#23629e'], // '黔江区'
                ['#2892b8', '#2e779e'], // '长寿区'
                ['#2c689b', '#2c81ad'], // '江津区'
                ['#2896bd', '#2f7399'], // '合川区'
                ['#265d9a', '#1f70ae'], // '永川区'
                ['#2e779e', '#0ea9dd'], // '南川区'
                ['#297c9e', '#27739c'], // '璧山区'
                ['#286799', '#2b6597'], // '铜梁区'
                ['#208cb6', '#24669d'], // '潼南区'
                ['#187bb8', '#1d59a0'], // '荣昌区'
                ['#229bbe', '#26779e'], // '梁平县'
                ['#2797c2', '#296c9e'], // '城口县'
                ['#2d709e', '#296b9d'], // '丰都县'
                ['#238fb2', '#267a9f'], // '垫江县'
                ['#018897', '#0292a2'], // '武隆县'
                ['#2d6d9f', '#2b6c9d'], // '忠县'
                ['#24669b', '#1f6597'], // '云阳县'
                ['#206499', '#1d659a'], // '奉节县'
                ['#1672ae', '#1b5295'], // '巫山县'
                ['#2174ad', '#225696'], // '巫溪县'
                ['#296ba2', '#28689d'], // '石柱土家族自治县'
                ['#1d6aad', '#236aad'], // '秀山土家族苗族自治县'
                ['#1d74b0', '#215fa1'], // '酉阳土家族苗族自治县'
                ['#21719f', '#227ba8'], // '彭水苗族土家族自治县'
                ['#3392c2', '#2d679e'], // '开州区'
            ]
            const splitList = dt.features.map((v, index) => {
                const { name: label } = v.properties
                const Area = areas.find(
                    (v) => v['行政区划'].substr(0, 2) === label.substr(0, 2)
                )
                return {
                    label,
                    start: index,
                    end: index,
                    fzl: Area['事故率'],
                    color: bgColors[index][0],
                }
            })
            var option = {
                series: [
                    {
                        type: 'map3D',
                        name: '重庆',
                        selectedMode: 'single', // 地图高亮单选
                        boxDepth: 95, // 地图倾斜度
                        regionHeight: 3, // 地图高度
                        map: 'dt',

                        label: {
                            show: true, // 是否显示市
                            textStyle: {
                                color: '#FFFFFF', // 文字颜色
                                fontSize: 14, // 文字大小
                                backgroundColor: 'transparent',
                            },
                            // 自定义label值
                            // formatter: '\t{c}\n{b}',
                            formatter: function ({ data }) {
                                return (
                                    data.name.substr(0, 2) +
                                    ' ' +
                                    data.fzl +
                                    '%'
                                )
                            },
                        },
                        itemStyle: {
                            // 渐变色
                            normal: {
                                opacity: 0.9,
                                borderColor: '#DDD',
                                borderWidth: 1, // 分界线wdith
                                // areaColor: {
                                //     type: 'radial',
                                //     x: 0.5,
                                //     y: 0.5,
                                //     r: 0.8,
                                //     colorStops: [
                                //         {
                                //             offset: 0,
                                //             color: '#000', // 0% 处的颜色
                                //         },
                                //         {
                                //             offset: 1,
                                //             color: '#fff', // 100% 处的颜色
                                //         },
                                //     ],
                                //     globalCoord: true, // 缺省为 false
                                // },
                            },
                        },
                        emphasis: {
                            label: {
                                show: true, // 是否显示高亮
                                textStyle: {
                                    color: '#fff', // 高亮文字颜色
                                },
                            },
                            itemStyle: {
                                show: true, // 是否显示高亮
                                color: '#FEB65C', // 地图高亮颜色
                            },
                        },
                        symbolSize: [8, 10],
                        symbol: '../../assets/imgs/zuobiao.png', // 定位小图标
                        data: splitList.map((v, index) => {
                            return { name: v.label, value: index, fzl: v.fzl }
                        }),
                        shading: 'realistic',
                        // 真实感材质相关配置 shading: 'realistic'时有效
                        realisticMaterial: {
                            detailTexture: '#fff', // 纹理贴图
                            textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                            roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
                            metalness: 0, // 0材质是非金属 ，1金属
                            roughnessAdjust: 0,
                        },
                        viewControl: {
                            distance: 125, // 地图视角 控制初始大小
                            // rotateSensitivity: 1, // 旋转
                            zoomSensitivity: 1, // 缩放
                            // autoRotate: true,
                            // autoRotateDirection:'ccw'
                            // 地图平移
                            panMouseButton: 'left',
                            rotateMouseButton: 'right',
                            center: [5, -10, 0],
                        },
                    },
                ],
                dataRange: {
                    show: false,
                    splitList: splitList,
                },
                animation: true,
                animationDurationUpdate: 5000,
            }
            myChart.setOption(option)
            // myChart.setOption(option)
            myChart.on('click', function (e) {
                console.log(e)
            })
        },

注意：echarts不能使用高于4.9.0版本，4.9.0以上版本在依赖包里已经没有地图json数据。