使用echarts省份地图

1.安装echarts

yarn add echarts

或

npm install echarts --save

2.main.js 加入以下代码

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

2.App.vue引入地图组件

<template>
  <div id="app">
    <province-map />
  </div>
</template>

<script>
import ProvinceMap from './components/ProvinceMap.vue'

export default {
  name: 'App',
  components: {
    ProvinceMap
  }
}
</script>

<style>
</style>

3.新建components/ProvinceMap.vue文件

<template>
  <div class="maps-container">
    <div id="main" class="chart"></div>
  </div>
</template>
<script>
import "echarts/map/js/province/anhui.js";
import obj from "echarts/map/json/province/anhui.json";
export default {
  data() {
    return {
      listArr: [], //城市json
      max: "", //最大value值
      min: "", // 最小value值
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.DrawMap();
  },
  methods: {
    getData() {
      // 获取城市名称数据
      console.log("取到的云南省的json数据", obj);
      if (obj) {
        let arr = obj.features;
        // 循环取出 城市名称和value值
        for (var j = 0; j < arr.length; j++) {
          this.max = arr[0].id;
          this.min = arr[0].id;
          if (arr[j].id > this.max) {
            this.max = arr[j].id;
          }
          if (arr[j].id < this.min) {
            this.min = arr[j].id;
          }
          this.listArr.push({
            name: arr[j].properties.name,
            value: arr[j].id,
          });
        }
      }
    },
    DrawMap() {
      let _this = this;
      let myChart8 = this.$echarts.init(document.getElementById("main"));
      console.log(
        "最大value值",
        this.max,
        "\n",
        "最小value值",
        this.min,
        "\n",
        "城市数据",
        this.listArr
      );
      myChart8.setOption({
        visualMap: {
          min: _this.min,
          max: _this.max,
          show: false,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            type: "map",
            map: "安徽",
            itemStyle: {
              normal: { label: { show: true } },
              //  emphasis: { label: { show: true } },
              emphasis: {
                areaColor: "#67C23A", //鼠标进入时的颜色
              },
            },
            data: _this.listArr,
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.maps-container {
  width: 100%;
  height: 100%;
}
.chart {
  width: 800px;
  height: 600px;
  border: 1px solid #ddd;
}
</style>