echarts地图下钻效果

先看效果图，第二张是因为数据差距过大导致。可调


再看代码

import * as echarts from 'echarts';
import mapJson from '../utils/福州市.json';
import mapJson1 from '../utils/三明市.json';
import mapJson2 from '../utils/福建省.json';
let selected='福建省'
export default {
    init (id, res, city=selected) {
        // var chartDom = document.getElementById(id);
        let  myChart = echarts.init(document.getElementById(id)); 
        let f = (id, res, selected) => {
            var data;
            var geoJson;
            if (selected === '三明市') {
                geoJson = mapJson1;
                data = [
                    { name: '梅列区', value: 0 },
                    { name: '三元区', value: 0 },
                    { name: '明溪县', value: 0 },
                    { name: '清流县', value: 0 },
                    { name: '宁化县', value: 0 },
                    { name: '大田县', value: 0 },
                    { name: '尤溪县', value: 0 },
                    { name: '沙县', value: 0 },
                    { name: '将乐县', value: 0 },
                    { name: '泰宁县', value: 0 },
                    { name: '建宁县', value: 0 },
                    { name: '永安市', value: 0 }
                ];
            } else if (selected === '福州市') {
                geoJson = mapJson;
                data = [
                    { name: '鼓楼区', value: 0 },
                    { name: '台江区', value: 0 },
                    { name: '仓山区', value: 0 },
                    { name: '马尾区', value: 0 },
                    { name: '晋安区', value: 0 },
                    { name: '长乐区', value: 0 },
                    { name: '闽侯县', value: 0 },
                    { name: '连江县', value: 0 },
                    { name: '罗源县', value: 0 },
                    { name: '闽清县', value: 0 },
                    { name: '永泰县', value: 0 },
                    { name: '平潭县', value: 0 },
                    { name: '福清市', value: 0 },
                ];
            } else if (selected === '福建省') {
                geoJson = mapJson2;
                data = [
                    { name: '福州市', value: 1550 },
                    { name: '三明市', value: 650 },
                    { name: '莆田市', value: 0 },
                    { name: '南平市', value: 0 },
                    { name: '宁德市', value: 0 },
                    { name: '龙岩市', value: 0 },
                    { name: '泉州市', value: 0 },
                    { name: '漳州市', value: 0 },
                    { name: '厦门市', value: 0 }
                ];
            }
            //获取当前显示地图下方地市的坐标点数据； 用于气泡显示
            var geoCoordMap = {};
            var mapFeatures = geoJson.features;
            mapFeatures.forEach(function (v, i) {
                var name = v.properties.name;
                geoCoordMap[name] = v.properties.centroid;
            });
            //将data数据进入方法，取需要的参数； 用于气泡显示
            var convertData = function (data) {
                let val = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];//这个是坐标
                    if (geoCoord) {
                        val.push({
                            name: data[i].name,
                            value:  geoCoord.concat(data[i].value),//value是要显示的数值
                        });
                    }
                    //name和value/cityCode参数根据实际项目中后台返回的参数名走；
                }
                return val;
            };
            // echarts.dispose(document.getElementById(id)); //先去掉原来的地图
            // myChart = echarts.init(document.getElementById(id));
            console.log(res)
            var option;
            myChart.showLoading();
            myChart.hideLoading();
            echarts.registerMap('SM', geoJson);
            for (let index = 0; index < res.length; index++) {
                const element = res[index];
                data.push({ "name": element.name, "value": element.value });
            }
            myChart.setOption(option = {
                title: {
                    // text: '泊位分布情况',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                      if (typeof (params.value)[2] == "undefined") {
                        if(isNaN(parseInt(params.value))){
                          return params.name + ' : ' + '-';
                        }else {
                          return params.name + ' : ' + params.value;
                        }
                      } else {
                        return params.name + ' : ' + params.value[2];
                      }
                     
                    }
                  },
                geo: {
                    show: true,
                    map: 'SM',
                    label: {
                      normal: {
                        show: false
                      },
                      emphasis: {
                        show: false,
                      }
                    },
                    // left:'45%', //调整地图初始化位置
                    roam: true,
                    itemStyle: {
                      normal: {
                        areaColor: 'transparent',
                        borderColor: '#3fdaff',
                        borderWidth: 2,
                        shadowColor: 'rgba(63, 218, 255, 0.5)',
                        shadowBlur: 30
                      },
                      emphasis: {
                        areaColor: '#2B91B7',
                      }
                    }
                  },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                },
                visualMap: {
                    min: 0,
                    max: 100,
                    text: ['拥挤', '空闲'],
                    realtime: true,
                    calculable: false,
                    inRange: {
                        // color: ['#7ea4e0', '#6597e3', '#4a88e7', '#377de9', '#2472e8', '#1267ea']
                    },
                    //图列字体颜色
                    textStyle: {
                        color: '#fff',
                        fontSize:14
                    }

                },
                series: [{
                    name: '散点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize:10,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true,
                            color: '#fff'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#fff'
                        }
                    }
                },
                {
                    type: 'map',
                    map: 'SM',
                    zoom: 12,
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                      normal: {
                        show: false
                      },
                      emphasis: {
                        show: false,
                        textStyle: {
                          color: '#fff'
                        }
                      }
                    },
                    roam: true,
                    itemStyle: {
                      normal: {
                        areaColor: '#031525',
                        borderColor: '#FFFFFF',
                      },
                      emphasis: {
                        areaColor: '#2B91B7'
                      }
                    },
                    animation: false,
                    data: data
                  },{
                    name: '点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbol: 'pin',
                    symbolSize: function (val) {
                        // var a = (maxSize4Pin - minSize4Pin) / (max - min);
                        // var b = minSize4Pin - a*min;
                        // b = maxSize4Pin - a*max;
                        // return a*val[2]+b;
                        return val[2]/30
                    },
                    label: {
                        normal: {
                            position: 'top',
                            formatter: function(res){
                                return res.value[2]
                            },
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 11,
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F62157', //标志颜色
                        }
                    },
                    zlevel: 6,
                    data: convertData(data)
                },  {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(data.sort(function(a, b) {
                      return b.value - a.value;
                    })),
                    symbolSize: function(val) {
                      return 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                      brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                      normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                      }
                    },
                    itemStyle: {
                      normal: {
                        color: '#F4E925',
                        shadowBlur: 10,
                        shadowColor: '#05C3F9'
                      }
                    },
                    zlevel: 1
                  },]
            });
            option && myChart.setOption(option);
        }
        //定义福建省的数组
        // let cities = ['福州市', '三明市', '莆田市', '南平市', '宁德市', '龙岩市', '洛阳市', '泉州市', '漳州市', '厦门市'];
        let citiesText = ['福州市', '三明市'];
        // // 定义初始加载的地图区域,福建省地图
        selected = city;
        f(id, res, selected)
        // 判断当前要加载的地图是不是范围内的市
        let isCity = (name) => {
            return citiesText.some((city) => {
                return city === name;
            })
        }
        // 监听地图点击事件
        myChart.on('click', (ev) => {
            // 如果点击的是一个市,那就切换到这个市的地图
            if (isCity(ev.name)) {
                selected = ev.name;
                // 从外部加载这个市的地图文件
                f(id, res, selected)
                return
            } else {
                // 否则切换福建省的地图
                selected = '福建省';
                f(id, res, selected)
                return
            }
        })
        window.addEventListener("resize", function() { //浏览器大小调整echarts随之改变
            myChart.resize();
        });

    }


}