vue+echarts绘制中国地图，动态配置省份颜色和城市标点

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

话不多说，上代码。

1、先写地图容器

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' // 区域颜色
          },
          roam: true,
          zoom: 1.2 // 设置地图默认大小
        },
        visualMap: [
          { // 地图组件映射
            type: 'piecewise', // 定义为分段型 piecewise
            x: '-1000 px', // 图例横轴位置
            y: '-1000 px', // 图例纵轴位置
            seriesIndex: 0, // 指定系列数据
            splitList: this.splitList
          }
        ],
        backgroundColor: '#fff', // 图表背景色
        series: [
          {
            type: 'map', // 地图类型
            mapType: 'china',
            roam: true,
            geoIndex: 0,
            // nameMap: {
            //   '黑龙江': '哈尔滨'
            // },
            aspectScale: 0.75,
            data: this.provinceMapValue // 各省地图数据
          },
          {
            name: '二级公司', // series名称
            type: 'scatter', // 散点类型
            coordinateSystem: 'geo', // series坐标系类型
            label: {
              normal: {
                show: true, // 显示标签
                formatter: '{b}',
                position: [-5, 15],
                textStyle: {
                  color: '#000',
                  fontSize: 12,
                  fontFamily: 'Microsoft YaHei',
                  textBorderColor: '#fff',
                  textBorderWidth: 2
                } // 标签字体颜色
              }
            },
            data: this.secondaryCompany // 二级公司（城市公司）
          },
          {
            name: '城市管理中心', // series名称
            type: 'scatter', // series图表类型
            coordinateSystem: 'geo', // series坐标系类型
            label: {
              normal: {
                show: true, // 显示标签
                formatter: '{b}',
                position: [-5, 15],
                textStyle: {
                  color: '#000',
                  fontSize: 12,
                  fontFamily: 'Microsoft YaHei',
                  textBorderColor: '#fff',
                  textBorderWidth: 2
                } // 标签字体颜色
              }
            },
            data: this.cityManageCenter // 城市管理中心
          },
          {
            name: '平台公司', // series名称
            type: 'scatter', // series图表类型
            coordinateSystem: 'geo', // series坐标系类型
            label: {
              normal: {
                show: true, // 显示省份标签
                formatter: '{b}',
                position: [-10, 30],
                textStyle: {
                  color: '#D81E06',
                  fontSize: 12,
                  fontFamily: 'Microsoft YaHei',
                  textBorderColor: '#fff',
                  textBorderWidth: 2
                } // 标签字体颜色
              }
            },
            symbol: 'path://M215.4 160.6H177c-8.9 0-16 7.2-16 16V849c0 8.9 7.2 16 16 16h38.4c8.9 0 16-7.2 16-16V176.7c0.1-8.9-7.1-16.1-16-16.1zM848.1 236c-189 152.5-378-180.6-567.1-28.2-8.8 7.1-16 21.3-16 30.1v430.9c0 8.9 7.2 9 16 1.9 189-152.5 378.1 180.7 567.1 28.2 8.9-7.1 16-21.3 16-30.1V237.9c0.1-8.8-7.1-9-16-1.9z',
            symbolSize: 14,
            symbolOffset: ['50%', '-100%'],
            data: this.platformCompany // 平台公司
          },
          {
            name: '其他公司', // 其他公司
            type: 'scatter', // series图表类型
            coordinateSystem: 'geo', // series坐标系类型
            label: {
              normal: {
                show: true, // 显示省份标签
                formatter: '{b}',
                position: [-5, 15],
                textStyle: {
                  color: '#000',
                  fontSize: 12,
                  fontFamily: 'Microsoft YaHei',
                  textBorderColor: '#fff',
                  textBorderWidth: 2
                }
              }
            },
            // symbolSize: 3,
            data: this.otherCompany // 其他公司
          },
          {
            name: '平台公司原城市公司', // 平台公司原城市公司 isOldMgcenterCompany
            type: 'scatter', // series图表类型
            coordinateSystem: 'geo', // series坐标系类型
            label: this.oldCityLabel,
            data: this.isOldCityCompany
          },
          {
            name: '平台公司原管理中心', // 平台公司原管理中心
            type: 'scatter', // series图表类型
            coordinateSystem: 'geo', // series坐标系类型
            label: this.oldCityLabel,
            data: this.isOldMgcenterCompany
          }
        ]
      }

mapChart.setOption(option)

6、配置点击事件，在点击公司名称可以跳转到公司详情页

 // 点击事件
 var that = this
 mapChart.on('click', function (params) {
    if (params.seriesName === '平台公司' || params.seriesName === '平台公司原城市公司' || params.seriesName === '平台公司原管理中心') {
      that.$router.push({name: 'cityDetails', query: {city: params.name, cityType: params.seriesName}})
    }
 })

7、设置宽度高度自适应，在屏幕分辨率切换时重新渲染

var h1 = document.documentElement.clientHeight // 获取屏幕的高度
      mapChart.getDom().style.height = h1 - 100 + 'px'
      mapChart.resize()
      window.onresize = function() {
        var h1 = document.documentElement.clientHeight // 获取屏幕的高度
        mapChart.getDom().style.height = h1 - 100 + 'px'
        mapChart.resize();
      }

最后效果展示：