Vue項目中echarts地圖渲染各個省市級

首先先從下面的網址拿到想要地區的json數據

echarts地圖各個省市級json數據

Vue代碼

<template>
  <div class="container" style="height: 100%" ref="container"></div>
</template>
<script>
const echarts = require("echarts");
import "@/utils/guangdong";　　//城市json數據
export default {
  name: "WuxiMap",
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const myChart = echarts.init(this.$refs.container);

      const option = {
        title: {
          text: "佛山",
        },
        series: [
          {
            type: "map",
            map: "佛山",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

 城市js文件

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
    echarts.registerMap('佛山', 城市JSON)}));