匠心接单中...8年前端开发和UI设计接单经验，完工项目1000+，持续为友友们分享有价值、有见地的干货观点，有业务需求的老铁，欢迎关注发私信。

1. 安装echarts和echarts-map插件

npm install echarts --save
npm install echarts-map --save

1. 在组件中引入echarts和echarts-map

import echarts from 'echarts'
import 'echarts/map/js/china' // 引入中国地图

1. 在mounted钩子函数中初始化echarts实例

mounted () {
  // 初始化echarts实例
  this.chart = echarts.init(this.$refs.map)
  // 绘制地图
  this.drawMap()
}

1. 编写绘制地图的函数

drawMap () {
  // 地图数据
  const geoData = require('echarts/map/json/china.json')
  // 注册地图
  echarts.registerMap('china', geoData)
  // 绘制地图
  this.chart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c} (件)'
    },
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: true
    },
    series: [
      {
        name: '地图名称',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        data: [
          { name: '北京', value: 100 },
          { name: '上海', value: 200 },
          { name: '广州', value: 300 },
          { name: '深圳', value: 400 },
          { name: '杭州', value: 500 },
          { name: '重庆', value: 600 },
          { name: '成都', value: 700 },
          { name: '武汉', value: 800 },
          { name: '西安', value: 900 },
          { name: '南京', value: 1000 }
        ]
      }
    ]
  })
}

1. 在模板中添加echarts容器

<template>
  <div ref="map" style="width: 100%; height: 500px;"></div>
</template>