vue+eharts绘制地图map

记录一次使用使用vue+eharts绘制地图，由于中间出现了很多问题，故记录。

先贴上代码

<template>
    <div>
      <div id='map' ref="mapChart" style="width:100%;height:376px"></div>
    </div>
</template>

<script>

import data from '@/static/china.json'
import echarts from "echarts";


export default {
  data () {
    return {
    }
  },
  mounted () {
      this.init()//调用下面的init进行 echarts初始化
  },
  methods: {
    init: function () {
      const chinaJson = data
      var myChart = echarts.init(document.getElementById("map"))
      echarts.registerMap("china", chinaJson)
      myChart.setOption({
        series: [
          {
            type: 'map',
            map: "china",
            itemStyle: {
              normal: {
                areaColor: 'rgba(23, 27, 57,0)',
                borderColor: '#1dc199',
                b