# vue2使用echarts做中国地图，以及各省地图

vue2使用echarts做中国地图，以及各省地图

效果图 ：

实现

首先需要安装echarts , 安装命令 ： npm install echarts

width和height随意设置，我这里是封装了组件，才这样写

引入echarts , code就是地图的数据

地图数据的地址 ： https://datav.aliyun.com/portal/school/atlas/area_selecto

实现代码
export default {
  name: "ChinaMap",
  props : {
    value : {
      type : Number,
      default : 0
    }
  },
  data() {
    return {
      codeData : code
    };
  },

  watch : {
    value () {
        this.initChar();
    }
  },

  mounted() {
    this.initChar();
  },
  methods: {
    initChar() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#asdf"));
      echarts.registerMap(this.codeData[this.value].word, JSON.stringify(this.codeData[this.value].mapData));
      // 绘制图表
      // 指定图表的配置和数据
      var option = {
        geo: {
          show: true, //是否显示
          type: "map", //类型是地图
          map: this.codeData[this.value].word, //中国地图
          label: {
            //设置字体样式
            show: false, //字体是否显示
            fontSize: 14, //设置字体大小
            color: "#fff", //设置字体颜色
          },
          itemStyle: {
            //设置图形样式
            areaColor: "#031f41", //地图颜色
            borderWidth: 1, //地图边框宽度
            borderColor: "#b8c16f", //地图边框颜色
          },
          zoom: 1.2, //地图放大到原来的多少倍
          emphasis: {
            //高亮状态（鼠标放在哪里，哪里发生变化）
            label: {
              //字体设置
              show: true, //显示字体
              color: "#ffffff", //字体颜色
              fontSize: 14, //字体大小
            },
            itemStyle: {
              //设置图像样式
              areaColor: "#03eefe", //设置地图背景颜色
              borderColor: "green", //设置边框颜色
              borderWidth: 1, //边框宽度
            },
          },
        },
        series: [
          //设置特效的
          {
            type: "", //带有特效动画的散点图
            coordinateSystem: "geo", //该系列使用的坐标系
            rippleEffect: {
              //特效相关配置
              period: 2,
              brushType: "stroke",
              scale: 1, //这个是设置类似于雷达波纹的大小的
            },
            label: {
              //标签
              normal: {
                //正常（默认）标签设置
                show: true, //标签显示
                position: "right", //标签显示在右侧
              },
            },
            itemStyle: {
              color: "#fc5531", //圆点的颜色
            },
            Symbol: "circle", //特效是圆
            // symbolSize:10,  //设置圆点的大小
            symbolSize: function (value) {
              return value[2];
            },
            data: [
              //数据
              {
                name: "北京",
                value: [116.4551, 40.2539, 20, "#fc5531"],
              },
              {
                name: "长沙",
                value: [113.0823, 28.2568, 10, "#b34b62"],
              },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图标
      myChart.setOption(option);
    },
  },
};