vue echarts 中国地图省级联动+散点图（各省json文件及china.js）

        最近用echarts 做个散点图，且省级联动，效果图如下：

1.安装echarts

cnpm install echarts --save

2.引入echarts、中国地图及省份地图json

import echarts from 'echarts'
import '../node_modules/echarts/province/anhui.js'
import '../node_modules/echarts/province/aomen' 
import '../node_modules/echarts/province/beijing'
import '../node_modules/echarts/province/chongqing'
import '../node_modules/echarts/province/fujian'
import '../node_modules/echarts/province/gansu'
import '../node_modules/echarts/province/guangdong'
import '../node_modules/echarts/province/guangxi'
import '../node_modules/echarts/province/guizhou'
import '../node_modules/echarts/province/hainan'
import '../node_modules/echarts/province/hebei'
import '../node_modules/echarts/province/heilongjiang'
import '../node_modules/echarts/province/henan'
import '../node_modules/echarts/province/hubei'
import '../node_modules/echarts/province/hunan'
import '../node_modules/echarts/province/jiangsu'
import '../node_modules/echarts/province/jiangxi'
import '../node_modules/echarts/province/jilin'
import '../node_modules/echarts/province/liaoning'
import '../node_modules/echarts/province/neimenggu'
import '../node_modules/echarts/province/ningxia'
import '../node_modules/echarts/province/qinghai'
import '../node_modules/echarts/province/shandong'
import '../node_modules/echarts/province/shanghai'
import '../node_modules/echarts/province/shanxi'
import '../node_modules/echarts/province/shanxi1'
import '../node_modules/echarts/province/sichuan'
import '../node_modules/echarts/province/taiwan'
import '../node_modules/echarts/province/tianjin'
import '../node_modules/echarts/province/xianggang'
import '../node_modules/echarts/province/xinjiang'
import '../node_modules/echarts/province/xizang'
import '../node_modules/echarts/province/yunnan'
import '../node_modules/echarts/province/zhejiang'
Vue.prototype.$echarts = echarts

3.配置echarts

            //echart配制
            setEchartOption(name) {
                this.myEchart = echarts.init(document.getElementById("china_map"));
                var dataValue = this.dealWithData(name);
                var baseSize = 2
                if (name == 'china') {
                    baseSize = 8
                }
                var option = {
                    tooltip: {
                        show: false,
                    },
                    geo: {
                        map: name,
                        roam: false, // 一定要关闭拖拽
                        zoom: 1.23,
                        // center: [105, 36], // 调整地图位置
                        label: {
                            normal: {
                                show: true, //区域名称展示
                                fontSize: "16",
                                color: "yellow",
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "#0E1A26",
                                borderColor: "#389dff",
                                borderWidth: 1, //设置外层边框
                                shadowBlur: 5,
                                shadowOffsetY: 8,
                                shadowOffsetX: 0,
                                shadowColor: "#01012a",
                            },
                            emphasis: {
                                areaColor: "#0E1A26",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 5,
                                borderWidth: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                    series: [
                        // 地图
                        {
                            type: "map",
                            map: name,
                            roam: false,
                            zoom: 1.23,
                            // center: [105, 36],
                            // geoIndex: 1,
                            // aspectScale: 0.75, //长宽比
                            showLegendSymbol: true, // 存在legend时显示
                            label: {
                                normal: {
                                    show: false,
                                },
                                emphasis: {
                                    show: false,
                                },
                            },
                            itemStyle: {
                                normal: {
                                    areaColor: "rgba(0, 0, 0, 0.1)",
                                    borderColor: "#ccc",
                                    borderWidth: 0.5,
                                },
                                emphasis: {
                                    areaColor: "red", //hover 的颜色
                                    borderColor: "#ccc",
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 0,
                                    shadowBlur: 5,
                                    borderWidth: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                        // 散点图
                        {
                            name: name,
                            type: "scatter",
                            coordinateSystem: "geo",
                            data: dataValue,
                            symbolSize: function (rawValue, params) {
                                return params.data.cityValue / baseSize;
                            },
                            symbol: "circle",
                            hoverSymbolSize: 10,
                            //可根据实际需求设置
                            tooltip: {
                                formatter(value) {
                                    console.log('散点value', value);
                                    return value.data.name + "
" + "党组织数：" +                 
                                           value.data.cityValue;
                                },
                                show: true,
                            },
                            encode: {
                                value: 2,
                            },
                            label: {
                                formatter: "{b}",
                                position: "right",
                                show: false,
                            },
                            itemStyle: {
                                color: "#0efacc",
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                },
                            },
                        },
                    ],
                };
                this.myEchart.setOption(option);
                // 自适应
                window.addEventListener("resize", ()=>{
                     if(this.myEchart){
                        this.myEchart.resize();
                     }
                });
                // 点击地图
                this.myEchart.on('click', (chinaParam) => {
                    this.switchProvincial(chinaParam)
                })
            },

4.地图点击事件

            switchProvincial(chinaParam) {
                this.myEchart.dispose()
                // 只做到省级，各省内区域点击返回全国地图
                this.myEchart = echarts.init(document.getElementById("china_map"));
                if (chinaParam.name == "北京" || chinaParam.name == "福建" ||             
                    chinaParam.name == "安徽" ||
                    chinaParam.name == "四川" || chinaParam.name == "澳门" || 
                    chinaParam.name == "重庆" ||
                    chinaParam.name == "甘肃" || chinaParam.name == "广东" || 
                    chinaParam.name == "广西" ||
                    chinaParam.name == "贵州" || chinaParam.name == "海南" ||     
                    chinaParam.name == "河北" ||
                    chinaParam.name == "黑龙江" || chinaParam.name == "河南" ||     
                    chinaParam.name == "湖北" ||
                    chinaParam.name == "湖南" || chinaParam.name == "江苏" || 
                    chinaParam.name == "江西" ||
                    chinaParam.name == "吉林" || chinaParam.name == "辽宁" || 
                    chinaParam.name == "内蒙古" ||
                    chinaParam.name == "宁夏" || chinaParam.name == "青海" || 
                    chinaParam.name == "山东" ||
                    chinaParam.name == "上海" || chinaParam.name == "山西" || 
                    chinaParam.name == "台湾" ||
                    chinaParam.name == "天津" || chinaParam.name == "香港" || 
                    chinaParam.name == "新疆" ||
                    chinaParam.name == "西藏" || chinaParam.name == "云南" || 
                    chinaParam.name == "浙江" ||
                    chinaParam.name == "陕西") {
                    this.setEchartOption(chinaParam.name)
                } else {
                    // alert(chinaParam.name + "区域还未开通！");
                    this.setEchartOption('china')
                }
            },

时间匆忙此例供大家参考，大家可根据实际需求进行改动，欢迎大家提意见留言，最后奉上全部代码及各省json文件：

链接: https://pan.baidu.com/s/1UUuSkgg7LCU9N5RrVwyN1Q 提取码: mmst