1、main.js引入echarts

import ECharts from 'echarts'
import 'echarts/map/js/china.js'

Vue.prototype.$echarts = ECharts

2、编写js

<template>
  <div class="dashboard-container">
    <div class="statistics-layout">
      <div class="layout-title">数据分布</div>
      <el-row>
        <el-col :span="18">
          <div id="myMap" style="width: 100%;height:600px;"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

const option = {
  backgroundColor: '#FFFFFF',
  title: {
    text: '数据分布',
    x: 'center'
  },
  tooltip: {
    trigger: 'item'
  },

  // 左侧小导航图标
  visualMap: {
    show: true,
    x: 'left',
    y: 'center',
    splitList: [
      { start: 500, end: 600 }, { start: 400, end: 500 },
      { start: 300, end: 400 }, { start: 200, end: 300 },
      { start: 100, end: 200 }, { start: 0, end: 100 }
    ],
    color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
  },

  // 配置属性
  series: [{
    name: '数据',
    type: 'map',
    mapType: 'china',
    roam: true,
    label: {
      normal: {
        show: true // 省份名称
      },
      emphasis: {
        show: false
      }
    },
    data: [
      { name: '北京', value: Math.round(Math.random() * 500) },
      { name: '天津', value: Math.round(Math.random() * 500) },
      { name: '上海', value: Math.round(Math.random() * 500) },
      { name: '重庆', value: Math.round(Math.random() * 500) },
      { name: '河北', value: Math.round(Math.random() * 500) },
      { name: '河南', value: Math.round(Math.random() * 500) },
      { name: '云南', value: Math.round(Math.random() * 500) },
      { name: '辽宁', value: Math.round(Math.random() * 500) },
      { name: '黑龙江', value: Math.round(Math.random() * 500) },
      { name: '湖南', value: Math.round(Math.random() * 500) },
      { name: '安徽', value: Math.round(Math.random() * 500) },
      { name: '山东', value: Math.round(Math.random() * 500) },
      { name: '新疆', value: Math.round(Math.random() * 500) },
      { name: '江苏', value: Math.round(Math.random() * 500) },
      { name: '浙江', value: Math.round(Math.random() * 500) },
      { name: '江西', value: Math.round(Math.random() * 500) },
      { name: '湖北', value: Math.round(Math.random() * 500) },
      { name: '广西', value: Math.round(Math.random() * 500) },
      { name: '甘肃', value: Math.round(Math.random() * 500) },
      { name: '山西', value: Math.round(Math.random() * 500) },
      { name: '内蒙古', value: Math.round(Math.random() * 500) },
      { name: '陕西', value: Math.round(Math.random() * 500) },
      { name: '吉林', value: Math.round(Math.random() * 500) },
      { name: '福建', value: Math.round(Math.random() * 500) },
      { name: '贵州', value: Math.round(Math.random() * 500) },
      { name: '广东', value: Math.round(Math.random() * 500) },
      { name: '青海', value: Math.round(Math.random() * 500) },
      { name: '西藏', value: Math.round(Math.random() * 500) },
      { name: '四川', value: Math.round(Math.random() * 500) },
      { name: '宁夏', value: Math.round(Math.random() * 500) },
      { name: '海南', value: Math.round(Math.random() * 500) },
      { name: '台湾', value: Math.round(Math.random() * 500) },
      { name: '香港', value: Math.round(Math.random() * 500) },
      { name: '澳门', value: Math.round(Math.random() * 500) }
    ] // 数据
  }]
}

export default {
  name: 'Dashboard',
  data() {
    return {
      option: option
    }
  },
  mounted() {
    this.drawChinaMap()
  },
  methods: {
    drawChinaMap() {
      const chart = this.$echarts.init(document.getElementById('myMap'))
      chart.setOption(option)
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 40px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
  }

  .statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }
</style>

注意：<div id="myMap" style="width: 100%;height:600px;"/>必须设置宽高，不然地图不会显示