geo地图

创建public\mapJson文件夹，置入需要的地图json文件

文章顶部文件包含河南省内所有市级json

组件代码

<template>
  <div>
    <div ref="geoEcharts" class="geo-echart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
  name: "Geo",
  props: {
    height: {
      type: String,
      default: "100vh",
    },
    geoCoordMap: {
      default: "",
    },
    value: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      timer: null,
      seriesData: [],
      //   geoCoordMap: {
      //     1: [114.837341, 34.731281],
      //     2: [113.637341, 34.531281],
      //   },
      series: [],
      map: null,
      code: "410000",
    };
  },
  watch: {
    height(val) {
      this.initGeoEcharts();
    },
    geoCoordMap(val) {
      this.initGeoEcharts();
    },
  },
  created() {},
  mounted() {
    this.initGeoEcharts();
  },
  destroyed() {
    window.onresize = null;
  },
  methods: {
    initGeoEcharts() {
      if (this.geoCoordMap) {
        console.log(this.geoCoordMap);
        for (let i in this.geoCoordMap) {
          this.seriesData.push({ name: i, value: this.value });
        }
      }

      //   console.log(this.series);
      this.getConfigKey("wg.city.code").then((response) => {
        this.code = response.msg || "410000";
        console.log(this.code);
        axios.get(`./mapJson/${this.code}.json`).then((res) => {
          echarts.registerMap("hn", res.data);
          this.$nextTick(() => {
            const map = echarts.init(this.$refs["geoEcharts"], null, {
              renderer: "svg",
            });
            if (this.height) {
              this.$refs.geoEcharts.style.height = this.height;
              map.resize();
            }
            const option = {
              // 悬浮窗
              tooltip: {},
              geo: [
                {
                  map: "hn",
                  zoom: 1,
                  //   roam: "move",
                  roam: true,
                  tooltip: {
                    show: true,
                  },
                  label: {
                    show: true,
                    color: "#fff",
                    position: "inside",
                    distance: 0,
                    fontSize: 14,
                    emphasis: {
                      show: true,
                      color: "#6eeffd",
                    },
                  },
                  // 所有地图的区域颜色
                  itemStyle: {
                    normal: {
                      areaColor: "rgba(0,60,153,0.6)",
                      borderColor: "#02c0ff",
                    },
                  },
                  emphasis: {
                    itemStyle: {
                      areaColor: "rgba(0,60,153,0.5)",
                      shadowColor: "rgba(0,0,0,0.8)",
                      shadowBlur: 5,
                      shadowOffsetY: 5,
                    },
                  },
                  
                  // 针对某些区域做一些特别的样式
                  // regions: [{
                  //   name: '广东省',
                  //   itemStyle: {
                  //     areaColor: 'yellow',
                  //     color: 'black',
                  //     borderColor: 'pink'
                  //   }
                  // }]
                },
              ],
              xAxis: {
                axisLine: { show: false },
                splitLine: { show: false },
                axisLabel: { show: false },
                axisTick: { show: false },
              },
              yAxis: {
                axisLine: { show: false },
                splitLine: { show: false },
                axisLabel: { show: false },
                axisTick: { show: false },
              },
              // 数据
              series: [
                {
                  name: "1", // series名称
                  type: "effectScatter",
                  coordinateSystem: "geo",
                  //   data: this.series,
                  symbolSize: 16,
                  data: this.geoCoordMap
                    ? this.convertData(this.seriesData)
                    : [],
                  encode: {
                    tooltip: 2,
                  },
                  symbolSize: function (params) {
                    return (params[2] / 100) * 15 + 5;
                  },
                  itemStyle: {
                    color: "#fc97af",
                  },
                  label: {
                    show: false,
                    formatter: "{b}",
                    position: "right",
                  },
                  tooltip: {
                    show: true,
                    confine: true,
                    formatter: "{b}",
                  },
                  emphasis: {
                    label: {
                      show: true,
                    },
                  },
                },
                // ,
                // {
                //   type: "scatter",
                //   coordinateSystem: "geo",
                //   data: [],
                //   SymbolSize: 4,
                // },
                // {
                //   type: "lines",
                //   coordinateSystem: "geo",
                //   data: [
                //     {
                //       coords: [
                //         [121.15, 38],
                //         [111, 31.89],
                //         [100.15, 31.89],
                //         [121.15, 29.89],
                //         [105.15, 30.89],
                //       ],
                //     },
                //   ],
                //   polyline: true, // 是否是多段线
                //   // lineStyle: {
                //   //     color: {
                //   //         type: 'radial',
                //   //         x: 0.5,
                //   //         y: 0.5,
                //   //         r: 0.5,
                //   //         colorStops: [{
                //   //             offset: 0, color: 'red' // 0% 处的颜色
                //   //         }, {
                //   //             offset: 1, color: 'blue' // 100% 处的颜色
                //   //         }],
                //   //         global: false, // 缺省为 false
                //   //         shadowColor: 'rgba(0, 0, 0, 0.5)',
                //   //         shadowBlur: 10,
                //   //         curveness: 1
                //   //     },
                //   //     opacity: 0.3,
                //   //     width: 2,
                //   // },
                //   // 线特效的配置
                //   effect: {
                //     show: true,
                //     period: 5, // 特效动画的时间，单位为 s
                //     trailLength: 1, //特效尾迹长度[0,1]值越大，尾迹越长重
                //     // symbol: 'image://' + require('@/echartsMap/money.png'), // 自定义动画图标
                //     symbolSize: 15, //图标大小
                //     color: "red",
                //   },
                // },
              ],
            };
            map.setOption(option);
            window.onresize = function () {
              map.resize();
            };
          });
        });
      });
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    },
  },
};
</script>

<style>
.geo-echart {
  height: calc(100vh * 1200 / 1920);
}
</style>