最近做了一个需求，是绘制中国地图，要动态配置省份颜色和城市标点。写下这篇文章记录一下。

话不多说，上代码。

1、先写地图容器

 <div id="mapWrap"></div>

2、设置容器的宽高度

#mapWrap{
  height: 100%;
  width: 100%
}

3、引入echarts、中国地图json

import echarts from 'echarts'
import '../../../../node_modules/echarts/map/js/china'
import chinaJson from '../../../../node_modules/echarts/map/json/china.json'

4、注册地图，初始化echarts

 echarts.registerMap('china', chinaJson) // 注册地图
 var mapChart = echarts.init(document.getElementById('mapWrap'))

5、配置地图配置项（最关键一步），详细配置说明都在代码里注释了

var option = {
        geo: { // 公共样式
          map: 'china',
          label: {
            normal: {
              show: false, // 显示省份标签
              textStyle: {
                color: '#000'
              } // 省份标签字体颜色
            }
          },
          itemStyle: {
            normal: {
              label: {show: false},
              borderWidth: 0.5, // 区域边框宽度
              borderColor: '#000', // 区域边框颜色
              areaColor: '#2E75B6' // 区域颜色
            }
          },
          emphasis: {
            label: {show: false},
            areaColor: '#F6C9AB' // 区域颜色
          }