vue中使用echarts中国地图

一效果图

二 上代码

封装的完整的地图组件，里面注释了很多就不解释了

<template>
  <div class="mapContent">
    <div ref="MapArea" class="echarts"></div>
  </div>

</template>
<script>
import 'echarts/map/js/china'	//导入echart的中国地图插件 

export default {
  name: 'MapArea',
  props: {
    currentTab: String,
  },
  watch: {
    currentTab() {
      this.initEcharts(this.currentTab)
    },
  },
  mounted() {	//vue的生命周期函数
    this.initEcharts(this.currentTab)		//调用初始化图表的函数
  },
  methods: {
    initEcharts(currentTab) {
      let echarts = this.$echarts.init(this.$refs.MapArea)	//获取到容器的节点，初始化echarts实例
      let dataList = [
        {
          area: '营销三区',
          name: '北京',
          value: 0.95,
        },
        {
          area: '营销四区',
          name: '上海',
          value: 0.42,
        },

      ]
      let option = {	//指定配置项和数据

        tooltip: {
          triggerOn: 'mousemove', //mousemove、click
          backgroundColor: 'rgba(255,255,255,0.9)',
          formatter: function(e) {
            if (!e.data) return
            let context = `
              <div class="showTool">
                <div class="title">${ currentTab === '大区' ? e.data.name : e.data.area} </div>
                <div class="rate">在线率：${ (e.data.value * 100).toFixed(0) }%</div>
              </div>
            `
            return context
          },
        },
        geo: {		//地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图（省会图）、线集（迁移图）
          map: 'china',	//地图类型
          roam: false,	//是否可以缩放
          zoom: 1.1,
          //aspectScale: 0.75, //拉伸地图 值为0-1
          label: { //标签组件（地图名）
            normal: { //默认状态
              show: false, //默认是true 因为后面我们要画省会所以就直接设为false
            },
            emphasis: { //高亮下的状态
              show: false,
            },
          },
          itemStyle: { //区域边形样式
            emphasis: {
              //color: '#fff',
              //areaColor: 'rgba(225, 225, 225, 0.4)',
            },
          },
        },
        series: [	//系列列表
          {
            name: 'map',
            type: 'map',
            geoIndex: 0,
            data: dataList,
          },
        ],
        visualMap: {
          min: 0,
          max: 1,
          // splitNumber: 10,
          realtime: false,
          calculable: true,
          precision: 2,  
          inRange: {
            color: ['#9E3362', '#65364E', '#493745'],
          }, //设置颜色
        },
      }
      echarts.setOption(option)	// 使用刚指定的配置项和数据显示图表。
    },

  },
}
</script>

<style lang="less" scoped>
.mapContent {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }

  /deep/ .showTool {
    width: 160px;
    height: auto;
    padding: 10px 0 10px 10px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.9);
    // box-shadow: 0px 2px 8px 0px rgba(13, 4, 8, 0.2);
    border-radius: 5px;
    .title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      line-height: 22px;
    }
    .rate {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      line-height: 22px;
    }
  }
}

</style>