vue+Echarts中国地图

一、npm安装依赖

Echarts最新的5.0版本，缺少内置的中国地图资料文件（china.js），所以只能用4.9版本，命令如下

`npm install echarts@4.9.0`

也可通过package.json文件查看/修改版本号

二,引入依赖

main.js 全局注册
*   import echarts from 'echarts'
*   Vue.prototype.$echarts = echarts
*   import 'echarts/map/js/china';
*
* 使用 this.$echarts.init()

三、地图代码

<template>
  <div>
    <h3>Vue + echarts4.9 基本地图</h3>
    <div id="daFeiMap" ref="daFeiMap" />
  </div>
</template>
<script>

/*
*  main.js 全局注册
*   import echarts from 'echarts'
*   Vue.prototype.$echarts = echarts
*   import 'echarts/map/js/china';
*
* 使用 this.$echarts.init()
* */


//或者
//import echarts from "echarts"

//import china from 'echarts/map/json/china.json'

//echarts.registerMap('china',china)

//Vue.prototype.$echarts = echarts






import echarts from 'echarts'
import 'echarts/map/js/china'; // 这个主要执行了 echarts.registerMap('china', " china.json 数据 ");

export default {
  mounted() {
    this.drawMap();
  },
  methods: {
    drawMap() {
      // const myChart = echarts.init(document.getElementById('daFeiMap'))
      const myChart = echarts.init(this.$refs.daFeiMap)
      const mapBoxOption = {
        series: [
          {
            type: 'map',
            mapType: 'china',
            label: {
              normal: {
                show: true, // 显示省份标签
                textStyle: {
                  color: 'blue' // 省份标签字体颜色
                }
              },
              emphasis: { // 对应的鼠标悬浮效果
                show: false,
                textStyle: {
                  color: '#800080'
                }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5, // 区域边框宽度
                borderColor: '#009fe8', // 区域边框颜色
                areaColor: '#ffefd5' // 区域颜色
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: '#4b0082',
                areaColor: '#ffdead'
              }
            },
          }
        ],
      }

      // myChart.registerMap("china"," china.json 数据 ")
      myChart.setOption(mapBoxOption)
    }
  },
};
</script>

<style scoped>
#daFeiMap {
  width: 500px;
  height: 480px;
}
</style>