vue中基于echarts做地图

1.先安装echarts

cnpm install echarts --save

2.需要全局引入

// 引入echarts
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts

3.下载省份的json数据

地址：http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

4.新建一个vue文件

<template>
  <chart :options="options" class="map" />
</template>
<script>
import "../js/guangdong copy";
export default {
  name: "ChartBar",
  props: {
    data: {
      type: Array,
      default: () => {
        return [
          { name: "广州市", value: 1,type:'1' },
          { name: "韶关市", value: 2,type:'1' },
          { name: "深圳市", value: 3,type:'1' },
          { name: "珠海市", value: 4,type:'1' },
          { name: "汕头市", value: 5,type:'1' },
          { name: "佛山市", value: 6,type:'1' },
          { name: "江门市", value: 7,type:'1' },
          { name: "湛江市", value: 8,type:'1' },
          { name: "茂名市", value: 9,type:'1' },
          { name: "肇庆市", value: 10,type:'1' },
          { name: "惠州市", value: 11,type:'1' },
          { name: "梅州市", value: 12,type:'1' },
          { name: "汕尾市", value: 13,type:'1' },
          { name: "河源市", value: 14,type:'1' },
          { name: "阳江市", value: 15,type:'1' },
          { name: "清远市", value: 16,type:'1' },
          { name: "东莞市", value: 17,type:'1' },
          { name: "中山市", value: 18,type:'1' },
          { name: "潮州市", value: 19,type:'1' },
          { name: "揭阳市", value: 20,type:'1' },
          { name: "云浮市", value: 21,type:'1' },
        ];
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    options() {
      return {
        title: {
          text: "",
          left: "center",
          textStyle: {
            color: "#000",
          },
        },
        visualMap: {
          show: true,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["#00467F", "#e8e6df"], // 蓝绿
          },
        },
        series: [
          {
            type: "map",
            mapType: "湖州",
            zoom: 1.1,
            top: "13",
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#000", //省份标签字体颜色
                  fontSize: 10,
                },
              },
              emphasis: {
                textStyle: {
                  color: "#ffffff",
                },
              },
            },
            itemStyle: {
              normal: {
                color: "white",
                borderColor: "#469ad6",
                areaColor: "#00467F",
              },
              emphasis: {
                areaColor: "#389BB7",
                borderWidth: 0,
              },
            },
            animation: true,
            data: this.data,
          },
        ],
      };
    },
  },
  created(){
  }
};
</script>
<style scoped>
.map {
  width: 100%;
  height: 92%;
  /* background: url('./img/mapBg.png') no-repeat; */
  background-size: 52%;
  background-position: 108px 1px;
}
</style>

5.最后的效果图