[JavaScript知识库]vue中使用echarts实现中国地图

第一种效果：不同省份颜色不同

代码：
注意：
①要实现这种效果，地图数据的name一定要是省份的名字，要不然颜色出不来；
②一定要有visualMap配置，并且它的seriesIndex属性 对应的是series的数组下标；

<template>
    <div class="echartsMapAllDemo">
        <!-- style的宽高一定要写，不写也不会展示echarts图 -->
        <div id="myEcharts" ref="myEcharts" style="width:100vw;height:100vh;border:3px solid gold"></div>
    </div>
</template>
<script>
import chinaJson from "../../assets/china.json";
export default {
  data() {
    return {};
  },
  mounted() {
    this.chinaEcharts();
  },
  methods: {
    chinaEcharts() {
      //1.注册一个地图
      this.$echarts.registerMap("china", chinaJson);

      //2.初始化echarts
      let myChart = this.$echarts.init(this.$refs.myEcharts);
    
      // 3.准备数据
      var data = [
        { name: "北京", value: 177 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 66 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 67 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 }
      ];
      var geoCoordMap = {
          上海:  [121.472644, 31.231706],
          云南:  [102.712251, 25.040609],
          内蒙古:  [111.670801, 40.818311],
          北京:  [116.405285, 39.904989],
          台湾:  [121.509062, 25.044332],
          吉林:  [125.3245, 43.886841],
          四川:  [104.065735, 30.659462],
          天津:  [117.190182, 39.125596],
          宁夏:  [106.278179, 38.46637],
          安徽:  [117.283042, 31.86119],
          山东:  [117.000923, 36.675807],
          山西:  [112.549248, 37.857014],
          广东:  [113.280637, 23.125178],
          广西:  [108.320004, 22.82402],
          新疆:  [87.617733, 43.792818],
          江苏:  [118.767413, 32.041544],
          江西:  [115.892151, 28.676493],
          河北:  [114.502461, 38.045474],
          河南:  [113.665412, 34.757975],
          浙江:  [120.153576, 30.287459],
          海南:  [110.33119, 20.031971],
          湖北:  [114.298572, 30.584355],
          湖南:  [112.982279, 28.19409],
          澳门:  [113.54909, 22.198951],
          甘肃:  [103.823557, 36.058039],
          福建:  [119.306239, 26.075302],
          西藏:  [91.132212, 29.660361],
          贵州:  [106.713478, 26.578343],
          辽宁:  [123.429096, 41.796767],
          重庆:  [106.504962, 29.533155],
          陕西:  [108.948024, 34.263161],
          青海:  [101.778916, 36.623178],
          香港:  [114.173355, 22.320048],
          黑龙江:  [126.642464, 45.756967],

      };
      //4.把数据变成[{{ name: "北京", value: [121.472644, 31.231706,177] },...}]格式
      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        console.log(res)
        return res;
      };
     //5.echarts配置
      let option = {
        backgroundColor: "transparent",
        title: {
          text: "全国主要城市空气质量",
          subtext: "data from PM25.in",
          sublink: "http://www.pm25.in",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} "
        },
        1)加上这个就可以实现多种颜色的功能
        visualMap: {
          min: 0,
          max: 100,
          text: ['High', 'Low'],
          calculable: true,
          seriesIndex: [0],//这个对应的是series的数组下标
          inRange: {
            color: ["#00467F", "#A5CC82"]
          }
        },
        //series就是地图上的数据（去掉就没有数据了）
        series: [
          {
            type: "map",
            map: 'china',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            roam: true,
            animation: false,
            data: data
          },
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
};
</script>
<style lang="less">
.echartsMapAllDemo {
}
</style>

第二种效果：地图+光圈散点

注意：
①一定要有geo这个配置，要不然光圈出不来。
并且series中的 type: “effectScatter”,的属性中一定要加上 coordinateSystem: “geo”,
② 然后对应的series中 这几个样式一定要加，加上才有那种光圈的效果

showEffectOn: "render",
rippleEffect: {
   brushType: "stroke"
}, 
hoverAnimation: true,

<template>
    <div class="echartsMapAllDemo">
        <!-- style的宽高一定要写，不写也不会展示echarts图 -->
        <div id="myEcharts" ref="myEcharts" style="width:100vw;height:100vh;border:3px solid gold"></div>
    </div>
</template>
<script>
import chinaJson from "../../assets/china.json";
export default {
  data() {
    return {};
  },
  mounted() {
    this.chinaEcharts();
  },
  methods: {
    chinaEcharts() {
      this.$echarts.registerMap("china", chinaJson);
      let myChart = this.$echarts.init(this.$refs.myEcharts);

      var data = [
        { name: "北京", value: 177 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 66 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 67 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 }
      ];
      var geoCoordMap = {
        上海: [121.472644, 31.231706],
        云南: [102.712251, 25.040609],
        内蒙古: [111.670801, 40.818311],
        北京: [116.405285, 39.904989],
        台湾: [121.509062, 25.044332],
        吉林: [125.3245, 43.886841],
        四川: [104.065735, 30.659462],
        天津: [117.190182, 39.125596],
        宁夏: [106.278179, 38.46637],
        安徽: [117.283042, 31.86119],
        山东: [117.000923, 36.675807],
        山西: [112.549248, 37.857014],
        广东: [113.280637, 23.125178],
        广西: [108.320004, 22.82402],
        新疆: [87.617733, 43.792818],
        江苏: [118.767413, 32.041544],
        江西: [115.892151, 28.676493],
        河北: [114.502461, 38.045474],
        河南: [113.665412, 34.757975],
        浙江: [120.153576, 30.287459],
        海南: [110.33119, 20.031971],
        湖北: [114.298572, 30.584355],
        湖南: [112.982279, 28.19409],
        澳门: [113.54909, 22.198951],
        甘肃: [103.823557, 36.058039],
        福建: [119.306239, 26.075302],
        西藏: [91.132212, 29.660361],
        贵州: [106.713478, 26.578343],
        辽宁: [123.429096, 41.796767],
        重庆: [106.504962, 29.533155],
        陕西: [108.948024, 34.263161],
        青海: [101.778916, 36.623178],
        香港: [114.173355, 22.320048],
        黑龙江: [126.642464, 45.756967]
      };
      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        // console.log(res)
        return res;
      };

      let option = {
        backgroundColor: "transparent",
        title: {
          text: "全国主要城市空气质量",
          subtext: "data from PM25.in",
          sublink: "http://www.pm25.in",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item"
        },
        //这个属性配置一定要有，要不然无法实现光圈效果
        geo: {
          show: true,
          map: "china",
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#031525",
              borderColor: "#3B5077"
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          }
        },
        //series就是地图上的数据（去掉就没有数据了）
        series: [
          //所有的市
          {
            name: "pm2.5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            //这几个样式一定要加，加上才有那种光圈的效果
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            
            label: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            //圆点的样式
            itemStyle: {
              color: "#ddb926"
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
};
</script>
<style lang="less">
.echartsMapAllDemo {
}
</style>

第三种效果:多彩省份+光圈散点+气泡

这个差不多就是上面两个的结合

 <template>
   <div>
      <div id="map" style="width:100vw;height:100vh;" ref="map"></div>

   </div>
 </template>
 <script>
import chinaJson from "../../assets/china.json";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$echarts.registerMap("china", chinaJson);
    let myChart = this.$echarts.init(this.$refs.map);
    this.$nextTick(() => {
      var mapName = "china";
      var data = [
        { name: "北京", value: 177 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 66 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 67 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 }
      ];
      var geoCoordMap = {};
      var toolTipData = [
        {
          name: "北京",
          value: [{ name: "文科", value: 95 }, { name: "理科", value: 82 }]
        },
        {
          name: "天津",
          value: [{ name: "文科", value: 22 }, { name: "理科", value: 20 }]
        },
        {
          name: "河北",
          value: [{ name: "文科", value: 60 }, { name: "理科", value: 42 }]
        },
        {
          name: "山西",
          value: [{ name: "文科", value: 40 }, { name: "理科", value: 41 }]
        },
        {
          name: "内蒙古",
          value: [{ name: "文科", value: 23 }, { name: "理科", value: 24 }]
        },
        {
          name: "辽宁",
          value: [{ name: "文科", value: 39 }, { name: "理科", value: 28 }]
        },
        {
          name: "吉林",
          value: [{ name: "文科", value: 41 }, { name: "理科", value: 41 }]
        },
        {
          name: "黑龙江",
          value: [{ name: "文科", value: 35 }, { name: "理科", value: 31 }]
        },
        {
          name: "上海",
          value: [{ name: "文科", value: 12 }, { name: "理科", value: 12 }]
        },
        {
          name: "江苏",
          value: [{ name: "文科", value: 47 }, { name: "理科", value: 45 }]
        },
        {
          name: "浙江",
          value: [{ name: "文科", value: 57 }, { name: "理科", value: 57 }]
        },
        {
          name: "安徽",
          value: [{ name: "文科", value: 57 }, { name: "理科", value: 52 }]
        },
        {
          name: "福建",
          value: [{ name: "文科", value: 59 }, { name: "理科", value: 57 }]
        },
        {
          name: "江西",
          value: [{ name: "文科", value: 49 }, { name: "理科", value: 42 }]
        },
        {
          name: "山东",
          value: [{ name: "文科", value: 67 }, { name: "理科", value: 52 }]
        },
        {
          name: "河南",
          value: [{ name: "文科", value: 69 }, { name: "理科", value: 68 }]
        },
        {
          name: "湖北",
          value: [{ name: "文科", value: 60 }, { name: "理科", value: 56 }]
        },
        {
          name: "湖南",
          value: [{ name: "文科", value: 62 }, { name: "理科", value: 52 }]
        },
        {
          name: "重庆",
          value: [{ name: "文科", value: 47 }, { name: "理科", value: 44 }]
        },
        {
          name: "四川",
          value: [{ name: "文科", value: 65 }, { name: "理科", value: 60 }]
        },
        {
          name: "贵州",
          value: [{ name: "文科", value: 32 }, { name: "理科", value: 30 }]
        },
        {
          name: "云南",
          value: [{ name: "文科", value: 42 }, { name: "理科", value: 41 }]
        },
        {
          name: "西藏",
          value: [{ name: "文科", value: 5 }, { name: "理科", value: 4 }]
        },
        {
          name: "陕西",
          value: [{ name: "文科", value: 38 }, { name: "理科", value: 42 }]
        },
        {
          name: "甘肃",
          value: [{ name: "文科", value: 28 }, { name: "理科", value: 28 }]
        },
        {
          name: "青海",
          value: [{ name: "文科", value: 5 }, { name: "理科", value: 5 }]
        },
        {
          name: "宁夏",
          value: [{ name: "文科", value: 10 }, { name: "理科", value: 8 }]
        },
        {
          name: "新疆",
          value: [{ name: "文科", value: 36 }, { name: "理科", value: 31 }]
        },
        {
          name: "广东",
          value: [{ name: "文科", value: 63 }, { name: "理科", value: 60 }]
        },
        {
          name: "广西",
          value: [{ name: "文科", value: 29 }, { name: "理科", value: 30 }]
        },
        {
          name: "海南",
          value: [{ name: "文科", value: 8 }, { name: "理科", value: 6 }]
        }
      ];

      /*获取地图数据*/
      let myChart = this.$echarts.init(document.getElementById("map"));
      // myChart.showLoading();
      var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
      // myChart.hideLoading();
      mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
      });
      // console.log(data);
      // console.log(toolTipData);
      var max = 480,min = 9; // todo
      var maxSize4Pin = 100,minSize4Pin = 20;

      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      var option = {
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            if (typeof params.value[2] == "undefined") {
              var toolTiphtml = "";
              for (var i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + ":<br>";
                  for (var j = 0; j < toolTipData[i].value.length; j++) {
                    toolTiphtml +=
                      toolTipData[i].value[j].name +
                      ":" +
                      toolTipData[i].value[j].value +
                      "<br>";
                  }
                }
              }
              // console.log(toolTiphtml);
              console.log(convertData(data))
              return toolTiphtml;
            } else {
              var toolTiphtml = "";
              for (var i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + ":<br>";
                  for (var j = 0; j < toolTipData[i].value.length; j++) {
                    toolTiphtml +=
                      toolTipData[i].value[j].name +
                      ":" +
                      toolTipData[i].value[j].value +
                      "<br>";
                  }
                }
              }
              console.log(toolTiphtml);
              // console.log(convertData(data))
              return toolTiphtml;
            }
          }
        },
        //这个属性控制地图的多彩板块
        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: 400,
          bottom: 200,
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            // color: ['#3B5077', '#031525'] // 蓝黑
            // color: ['#ffc0cb', '#800080'] // 红紫
            // color: ['#3C3B3F', '#605C3C'] // 黑绿
            // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
            // color: ['#23074d', '#cc5333'] // 紫红
            color: ["#00467F", "#A5CC82"] // 蓝绿
            // color: ['#1488CC', '#2B32B2'] // 浅蓝
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
          }
        },
        geo: {
          show: true,
          map: mapName,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#031525",
              borderColor: "#3B5077"
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          }
        },
        series: [
        //1）全省的散点
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#05C3F9"
              }
            }
          },
          // 2）为了与visualMap配对，必须要加上
          {
            type: "map",
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077"
              },
              emphasis: {
                areaColor: "#2B91B7"
              }
            },
            animation: false,
            data: data
          },
          //3）气泡
          {
            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;
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 9
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#F62157" //标志颜色
              }
            },
            zlevel: 6,
            data: convertData(data)
          },
          //4.前五个有效果的光圈
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data
                .sort(function(a, b) {
                  return b.value - a.value;
                })
                .slice(0, 5)
            ),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow"
              }
            },
            zlevel: 1
          }
        ]
      };
      myChart.setOption(option);
    });
  }
};
</script>
 

第四种效果：下钻

下钻后：

遇到的比较难解决的问题：
从全国地图下钻到安徽省的地图，安徽省的地图会小很多，修改了数据和json包发现都不行，但别人的echarts安徽省的图可以，就是很奇怪，找不到原因。解决的办法就是不同的地图设置不用的中心点和缩放比例。

<template>
    <div class="echartsMapAllDemo">
        <!-- style的宽高一定要写，不写也不会展示echarts图 -->
        <div id="myEcharts" ref="myEcharts" style="width:1000px;height:800px;border:3px solid gold"></div>
    </div>
</template>
<script>
import chinaJson from "../../assets/china.json";
import anhui from '../../assets/province/anhui.json'
import AQ from '../../assets/province/AQ.json'
export default {
  data() {
    return {
      //全国的数据和地理坐标
      chinaData:[
        { name: "北京", value: 177 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 66 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 67 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 }
      ],
      chinaGeoCoordMap:{
        上海: [121.472644, 31.231706],
        云南: [102.712251, 25.040609],
        内蒙古: [111.670801, 40.818311],
        北京: [116.405285, 39.904989],
        台湾: [121.509062, 25.044332],
        吉林: [125.3245, 43.886841],
        四川: [104.065735, 30.659462],
        天津: [117.190182, 39.125596],
        宁夏: [106.278179, 38.46637],
        安徽: [117.283042, 31.86119],
        山东: [117.000923, 36.675807],
        山西: [112.549248, 37.857014],
        广东: [113.280637, 23.125178],
        广西: [108.320004, 22.82402],
        新疆: [87.617733, 43.792818],
        江苏: [118.767413, 32.041544],
        江西: [115.892151, 28.676493],
        河北: [114.502461, 38.045474],
        河南: [113.665412, 34.757975],
        浙江: [120.153576, 30.287459],
        海南: [110.33119, 20.031971],
        湖北: [114.298572, 30.584355],
        湖南: [112.982279, 28.19409],
        澳门: [113.54909, 22.198951],
        甘肃: [103.823557, 36.058039],
        福建: [119.306239, 26.075302],
        西藏: [91.132212, 29.660361],
        贵州: [106.713478, 26.578343],
        辽宁: [123.429096, 41.796767],
        重庆: [106.504962, 29.533155],
        陕西: [108.948024, 34.263161],
        青海: [101.778916, 36.623178],
        香港: [114.173355, 22.320048],
        黑龙江: [126.642464, 45.756967]
      },
      //安徽的数据和地理坐标
      anhuiData:[
        { name: '合肥市', value: 19 },
        { name: '淮南市', value: 14 },
        { name: '芜湖市', value: 19 },
        { name: '蚌埠市', value: 12 },
        { name: '马鞍山市', value: 19 },
        { name: '淮北市', value: 15 },
        { name: '铜陵市', value: 19 },
        { name: '安庆市', value: 14 },
        { name: '黄山市', value: 19 },
        { name: '滁州市', value: 12 },
        { name: '阜阳市', value: 19 },
        { name: '宿州市', value: 15 },
        { name: '六安市', value: 19 },
        { name: '亳州市', value: 14 },
        { name: '宣城市', value: 19 },
      ],
      anhuiGeoCoordMap:{
        合肥市: [117.283042, 31.86119],
        淮南市: [117.018329, 32.647574],
        芜湖市: [118.376451, 31.326319],
        蚌埠市: [117.363228, 32.939667],
        马鞍山市: [118.507906, 31.689362],
        淮北市: [116.794664, 33.971707],
        铜陵市: [117.816576, 30.929935],
        安庆市: [117.043551, 30.50883],
        黄山市: [118.317325, 29.709239],
        滁州市: [118.316264, 32.303627],
        阜阳市: [115.819729, 32.896969],
        宿州市: [116.984084, 33.633891],
        六安市: [116.507676, 31.752889],
        亳州市: [115.782939, 33.869338],
        宣城市: [118.757995, 30.945667],
      }
    }
  },
  mounted() {
    let center = ''
    let zoom = 1.2
    this.chinaEcharts(chinaJson,this.chinaData,this.chinaGeoCoordMap,center,zoom);
  },
  methods: {
    chinaEcharts(json,data,geoCoordMap,center,zoom) {
      this.$echarts.registerMap("china", json);
      let myChart = this.$echarts.init(this.$refs.myEcharts);

      var convertData = (data)=> {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        // console.log(res)
        return res;
      };

      let option = {
        backgroundColor: "transparent",
        title: {
          text: "全国主要城市空气质量",
          subtext: "data from PM25.in",
          sublink: "http://www.pm25.in",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item"
        },
        geo: {
          show: true,
          map: "china",
          center: center,
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#031525",
              borderColor: "#3B5077"
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          },
          roam: true,//平移和鼠标缩放
          zoom: zoom,//倍数放大
          // 去掉南海诸岛
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ]
        },
        //series就是地图上的数据（去掉就没有数据了）
        series: [
          //所有的市
          {
            name: "pm2.5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            //这几个样式一定要加，加上才有那种光圈的效果
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            
            label: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            //圆点的样式
            itemStyle: {
              color: "#ddb926"
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      };
      myChart.setOption(option,true);
      myChart.on("click", (parms)=> {
        if(parms.name == "安徽"){
          let center = [117.283042, 31.86119]
          let zoom = 3
          this.chinaEcharts(anhui,this.anhuiData,this.anhuiGeoCoordMap,center,zoom)
        }else if (parms.name == "蚌埠市") {
          chinaEcharts(BB, BBData);
        } else if (parms.name == "宿州市") {
          chinaEcharts(SZ, SZData);
        } else if (parms.name == "淮北市") {
          chinaEcharts(HB, HBData);
        } else if (parms.name == "亳州市") {
          chinaEcharts(HZ, HZData);
        } else if (parms.name == "淮南市") {
          chinaEcharts(HN, HNData);
        } else if (parms.name == "阜阳市") {
          chinaEcharts(FY, FYData);
        } else if (parms.name == "六安市") {
          chinaEcharts(LA, LAData);
        } else if (parms.name == "合肥市") {
          chinaEcharts(HF, HFData);
        } else if (parms.name == "滁州市") {
          chinaEcharts(CZS, CZSData);
        } else if (parms.name == "安庆市") {
          chinaEcharts(AQ, AQData);
        } else if (parms.name == "池州市") {
          chinaEcharts(CZ, CZData);
        } else if (parms.name == "铜陵市") {
          chinaEcharts(TL, TLData);
        } else if (parms.name == "芜湖市") {
          chinaEcharts(WF, WFData);
        } else if (parms.name == "马鞍山市") {
          chinaEcharts(MAS, MASData);
        } else if (parms.name == "黄山市") {
          chinaEcharts(HS, HSData);
        } else if (parms.name == "宣城市") {
          chinaEcharts(XC, XCData);
        } else {
          chinaEcharts(AHS, AHSData);
        }
      });
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
};
</script>
<style lang="less">
.echartsMapAllDemo {
}
</style>