vue项目引入中国地图

先安装有china.js的版本

npm install echarts@4.8 --save  //以前的版本有china.js

---

<template>
  <div class="mapMain">
      <div id="map" style="width: 30vw; height: 30vw;" />
  </div>
</template>

<script>

//引入文件
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import 'echarts/map/js/china.js'


//中国地图区域
export default {
  name:'ditumap',
  data() {
    return {

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      let chinaMap = echarts.init(document.getElementById("map"));// 窗口或框架被调整大小时执行chinaMap.resize
      chinaMap.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        series: [
          {
            name: '中国',
            type: 'map',
            mapType: 'china',
            selectedMode : 'multiple',
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data:[
              {name:'新疆', selected:true}
            ]
          }
        ]
      })
    },
  }
}
</script>

---

 

---

实现效果如上，

---

main.js需要先引入echarts

---

import * as Echarts from 'echarts'  //引入echarts

---

 

---

 package.json也需要引入对应的依赖（使用命令行下载会自动导入，）

---

 

---

到这里就已经实现可用了，希望可以帮助到各位小伙伴

---