echarts map背景渐变色、默认高亮部分省份

最近做了一个数据驾驶舱，跟大部分驾驶舱一样，需要支持各种图表以及地图的显示。期间地图的显示碰到了一些问题，大部分都是和优化相关，先贴效果图吧。

上图需要实现下面几个优化点

1:地图背景实现渐变色
2:初始化地图时需要默认高亮几个省份
3:地图悬浮本身的样式效果去掉，只需要省份名字颜色变成黑色
4:地图不支持选中省份

这些优化点说难不难，就是挺麻烦的。这些点大部分都需要重新定制地图样式。这次引入的插件是 echarts。获取 mapjson数据可以从 DataV数据可视化平台上下载，这是阿里提供的一个平台，也有对应的大屏UI 组件，但我公司的大屏是自己设计的，不匹配，所以目前只用了地图 json 数据。我先直接把代码 po 出来。

options = {
    backgroundColor: 'transparent',//画布背景颜色
    width: this.cssStyle.height,
    height: this.cssStyle.height,
    zoom: 3.5,
    layoutCenter: ['50%', '70%'],
    layoutSize: '136%',
    geo: {
      show: true,
      map: 'china',
      label: {
        show: true
      },
      roam: false,
      itemStyle: {
        areaColor: {
          image: imgBg,
          repeat: 'repeat-x', // 不重复
          // width: 864, // 图片宽度
        },
        shadowColor: '#0A1B70', //阴影颜色
        shadowOffsetX: 0, //阴影偏移量
        shadowOffsetY:0.1, //阴影偏移量
      },
      //地图的阴影不显示南沙诸岛
      regions,
      select: { // 选中时的样式
        label: {
            show: true,
            z:100,
            color: '#fff' // 选中时标签颜色
        },
        itemStyle: {
          areaColor: '#EA7325', // 选中时的颜色
          borderColor: "transparent",
          borderWidth: 0.5
        }
      },
    },
    series: [
      {
        type: 'map',
        map: 'china',
        label: {
          show: true,
          color: "#fff",
          fontSize: 12,
          fontWeight: "bold",
          formatter: "{b}",
          z: 100,
          position: 'inside',
        },
        roam: false,
        itemStyle: {
          normal: {
            areaColor: 'transparent', // 区域背景透明
            borderColor: '#3FFFFF',
            borderWidth: 0.8, // 省份边框宽度
          },
        },
        emphasis: { // 悬浮时的样式
          label: {
            z:100,
            show: true,
            color: '#333', // 选中时标签颜色
          },
          itemStyle: {
            areaColor: 'transparent' // 悬浮时的颜色
          }
        },
        selectedMode: 'false', // 允许选中单个区域
      }
    ]
}

1:地图背景实现渐变色

echarts itemStyle areaColor只支持设置省份的颜色，也支持插入背景图，如果在 itemStyle 设置渐变，最终的效果就是每个省份都是渐变色。所以这里直接改变思路，在 series 里将每个省份的背景色改为透明。在 geo 里设置 map 的底图，底图可以是渐变色。但是需要注意设置的背景图最好和地图的尺寸大小一致。

2:初始化地图时需要默认高亮几个省份

方法 1：通过 dispatchAction 方法去设置需要高亮的省份。其中 name 必须和 mapJson 数据里的 name 保持一致，并且selectedMode设置为支持选中。但是这样做有一个 bug，dispatchAction 是通过 select 的方式去选中高亮的省份。高亮的省份 z-index层级高于其他图层，会遮挡住其他省份的显示。所以这种方式 pass

//高亮当前区域
const name = ['浙江','江西']
name.forEach(item => {
this.$nextTick(() => {
  this.myChart.dispatchAction({
    type: 'select',
    name: item
  })
})
})

方法 2：在 regions 里设置需要高亮的省份

let regions = []
const name = this.province ? this.province.map(m => (m.includes('内蒙古') || m.includes('黑龙江') ? m.slice(0, 3) : (m.includes('南海') ? m.slice(0, 4) : m.slice(0, 2)))) : []
name.forEach(item => {
    regions.push({
      name: item,
      selected:true,
      label: {
        show: true,
        z:100,
        color: '#fff' // 选中时标签颜色
      },
      itemStyle: {
        areaColor: '#EA7325', // 选中时的颜色
        borderColor: "transparent",
        borderWidth: 0.5
      }
    })
})
options = {
    ...
    geo:{
        ...
        regions,
        ...
    }
}

以上差不多就是所有的代码了，3 和 4 都是 echarts 本身就有的 api。