echarts——实现2D地图+各省份数据展示——技能提升

场景

同事做的项目，是个2D中国地图，使用的是echarts+vue。最终效果如下：

点击某个省份后，效果图如下：

本篇文章只处理中间地图部分，其他内容不做介绍。

1.html代码

<template>
  <div>
    <div class="map-container" ref="myEchart"></div>
    <div class="mapCity" :class="{on:showCity}">
      <i class="close el-icon-close" @click="showCity = false"></i>
      <div id="myEchartCity" ref="myEchartCity"></div>
    </div>
  </div>
</template>

2.script代码

<script>
import * as echarts from 'echarts';
import regions from "@/api/china";//地图的数据，参考上一篇管理地图数据的博文，格式跟文中的一致
import {getWebHomeLocation} from "@/api/web";
import {resMapCPL} from "@/api/common";
var mapChart;//全局地图
export default {
  data(){
    return{
      province:'',showCity:false,resDataCitys:[],
    }
  },
  mounted() {
    this.getData(false);
  },
  methods: {
    async getData(reset) {
      await this.getMapLocation();
      if (reset) mapChart.dispose();
      echarts.registerMap('china', regions); // 注册矢量地图数据
      mapChart = echarts.init(this.$refs.myEchart);
      let data = this.resDataCitys;
      var option = {
        tooltip: {
          formatter: (params)=>{
            let val = params.value||0;
            if(params.value){
              return `客户分布<br>${params.name}：${val}人`
            }
          }
        },
        visualMap: {
          show:false,
          realtime: false,
          calculable: false,
          inRange: {
            color: ['#cad6ea','rgb(48,94,122)','rgba(0,80,179,0.5)'] // 渐变颜色
          }
        },
        series: [
          {
            name: '客户分布',
            type: "map",
            map: "china",
            roam: false,
            zoom: 1.335,//这个比例是根据背景图调整的，正常情况下，一般都是1
            center: [104, 37.8],//这个也是根据背景图和zoom调整的
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                borderColor: "#666",
                borderWidth: 0.5,
                areaColor: "rgba(255,255,255,0.5)", //区域颜色
              },
              emphasis: {
                areaColor: "#ff9900",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            data:data
      }],
    }
      mapChart.setOption(option,true);
      let that = this;
      window.addEventListener("resize", function() {
        mapChart.resize();
      });
      mapChart.on('click', function (params) {
        that.province = params.name
        that.initImportFile()
      });
    },
    initImportFile() {
      var filaName = {
        浙江省: "zhejiang.js",
        安徽省: "anhui.js",
        澳门: "aomen.js",
        北京市: "beijing.js",
        重庆市: "chongqing.js",
        福建省: "fujian.js",
        甘肃省: "gansu.js",
        广东省: "guangdong.js",
        广西壮族自治区: "guangxi.js",
        贵州省: "guizhou.js",
        海南省: "hainan.js",
        河北省: "hebei.js",
        黑龙江省: "heilongjiang.js",
        河南省: "henan.js",
        湖北省: "hubei.js",
        湖南省: "hunan.js",
        江苏省: "jiangsu.js",
        江西省: "jiangxi.js",
        吉林省: "jilin.js",
        辽宁省: "liaoning.js",
        内蒙古自治区: "neimenggu.js",
        宁夏回族自治区: "ningxia.js",
        青海省: "qinghai.js",
        山东省: "shandong.js",
        上海市: "shanghai.js",
        山西省: "shanxi.js",
        陕西省: "shaanxi.js",
        四川省: "sichuan.js",
        台湾省: "taiwan.js",
        天津市: "tianjin.js",
        香港: "xianggang.js",
        新疆维吾尔自治区: "xinjiang.js",
        西藏自治区: "xizang.js",
        云南省: "yunnan.js"
      };
      let regions2 = require(`@/api/mapJS/${filaName[this.province]}`);
      //上面是各个省份的地图数据，同中国地图数据，都是参考上一篇博文中的数据格式。通过export default导出的数据，可以通过require来获取。
      this.initChinaMap(this.province,regions2.default)
    },
    async getMapLocation(){
      if (this.resDataCitys.length>0) return true;
      let data = await getWebHomeLocation()
      this.resDataCitys = data.data;
    },
    initChinaMap(mapName,regions2) {
      this.showCity=true;
      echarts.registerMap(mapName,regions2); // 注册矢量地图数据
      let getPL = resMapCPL(mapName)
      let dataCitys = this.resDataCitys;
      let dataValue = []
      for(let i in dataCitys){
        let city = {...dataCitys[i]}
        for (let c in getPL){
          let p = {...getPL[c]};
          if (city.name == p.city){
            city.number = city.value;
            city.value = p.latitude;
            dataValue.push(city)
          }
        }
      }
      let option = {
        tooltip: {
          show: false
        },
        geo: {
          map: this.province,
          roam: false,
          label: {
            normal: {
              show: false,
            }
          },
          itemStyle: {
            normal: {
              borderColor: "#666",
              borderWidth: 0.5,
              areaColor: "#fff", //区域颜色
            },
            emphasis: {
              areaColor: "#ff9900",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        series: [
          {
            type: "map",
            map: this.province,
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#333"
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#000"
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: "transparent",
                borderColor: "#389dff",
                borderWidth: 0.5
              },
              emphasis: {
                areaColor: "transparent",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 0,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "",
            type: "scatter",
            coordinateSystem: "geo",
            data: dataValue,
            symbol: "diamond",
            symbolSize: 20,
            hoverSymbolSize: 10,
            tooltip: {
              formatter(value) {
                console.log(value)
                return value.data.name + "<br/>" + "客户数：" + value.data.number;
              },
              show: true
            },
            encode: {
              value: 2
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false
            },
            itemStyle: {
              color: "#ff9900"
            },
            emphasis: {
              label: {
                show: false
              }
            }
          },

        ]
      };
      let myEchart = echarts.init(this.$refs.myEchartCity);
      myEchart.setOption(option);
      let that = this;
      myEchart.on('click', function (params) {
        that.$router.push('/web/list?location='+params.name);
      });
    },
  },
};
</script>

3.style代码

<style scoped>
.map-container{width:100%; position: absolute; top:0; left:0; right:0; bottom:0; height:100%;}
.mapCity{position: absolute; top:40%; left:50%; z-index:9; transform: translate(-50%,-50%); border:2px solid #999; border-radius:10px; width:100%; height:100%; max-width:980px; max-height:680px; opacity:0; visibility: hidden;transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; background-color:rgba(231,234,249,.9); box-shadow:rgba(31, 99, 255,.3) 0 0 40px;}
.mapCity .close{position: absolute; top:.5em; right:.5em; color:#333; font-size:26px; cursor: pointer; z-index:10;}
.mapCity .close:hover{color:#f30}
.mapCity #myEchartCity{width:100%; height:100%;}
.mapCity.on{visibility:visible; opacity:1; top:50%;}
</style>

完成！！！

如果大家需要各个地区的js数据，可以参考echarts——实现地图——获取全国+各省市的数据js——基础积累这篇文章，或者留言留下邮箱，我看到会发到指定邮箱中。