echarts 绘制省份地图 [ 把不同省份的市合并在一起 ]

安装echarts

yarn add echarts

效果图：

获取任意省市县数据来源json格式

注意：

这里在请求在写地图数据的时候，我采用的是JQ。使用axios的话会出现错误信息;

废话不多说，看代码效果：

<template>
  <div id="container"></div>
</template>

<script>
import echarts from "echarts";
import $ from "jquery";
import "echarts/map/js/china.js"; // 引入中国地图数据
export default {
    
    
  data() {
    
    
    return {
    
    };
  },
  mounted() {
    
    
    this.MapData();
  },
  methods: {
    
    
    MapData() {
    
    
      var myChart = echarts.init(document.getElementById("container"));
      $.get(
        "https://geo.datav.aliyun.com/areas_v2/bound/110000_full.json",
        (result) => {
    
    
          console.log(result);
          echarts.registerMap("北京市", result);
          var option = {
    
    
            tooltip: {
    
    
              trigger: "item",
            },
            title: {
    
    
              text: "北京地图",
              x: "center",
            },
            geo: {
    
    
              map: "北京市",
              label: {
    
    },
              roam: true,
              itemStyle: {
    
    },
            },
            series: [
              {
    
    
                type: "effectScatter",
                coordinateSystem: "geo",
                rippleEffect: {
    
    
                  brushType: "stroke",
                },
                symbolSize: function(val, params) {
    
    
                  return 8;
                },
                data: [],
              },
            ],
          };
          myChart.setOption(option);
        }
      ).catch((err) => {
    
    
        console.log(err);
      });
    },
  },
};
</script>

<style>
#container {
    
    
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}
</style>

把不同省份的市合并在一起

合并json文件链接

geojson使用介绍