Vue + ECharts4.9实现基本地图

Vue + ECharts4.9实现基本地图

ECharts5.0以上版本这里不做介绍,以下demo实现ECharts4.9版本

<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 '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>