echarts地图整体渐变色

最终效果图

地图整体设置渐变色，会设置到每一块都是颜色渐变，并不是整体一个颜色渐变过去。如下图：

直接设置渐变色效果

显然这不是我们想要的效果。

网上大部分地图渐变色案例，是使用的visualMap比例尺效果实现的，但是这个效果是依据地图块对应的 value 数值的大小自动分配颜色，对于一些想自定义整体渐变色的场景不是很方便了。

通过echarts官方的配置文档发现geo中的一个属性regions，此属性的作用是：在地图中对特定的区域配置样式。

以汕头市地图为例，颜色：深蓝----浅蓝渐变，方向：左下----右上。

此方法麻烦之处是，需要UI提供一下每个块的渐变颜色和渐变方向，然后单独设置每个块的渐变色，最后整体效果就可以达到想要的效果了。

    geo: {
       type: 'map',
       map: '汕头',
       selectedMode: 'single', //是否支持多个选中，single单选，multiple多选
       aspectScale: 0.8,  //地图长度比
       roam: false,
       zoom: 1,
       regions: [{
           name: '潮南区',
           itemStyle: {
               normal: {
                   areaColor: { //地图色
                       type: 'linear',
                       x: 0,
                       y: 1,
                       x2: 0,
                       y2: 0,
                       colorStops: [{
                           offset: 0, color: '#003ddf' // 0% 处的颜色
                       }, {
                           offset: 1, color: '#0069e6' // 100% 处的颜色
                       }],
                       global: false // 缺省为 false
                   },
               },
           }
       },{
           name: '潮阳区',
           itemStyle: {
               normal: {
                   areaColor: { //地图色
                       type: 'linear',
                       x: 0,
                       y: 1,
                       x2: 0,
                       y2: 0,
                       colorStops: [{
                           offset: 0, color: '#004fdd' // 0% 处的颜色
                       }, {
                           offset: 1, color: '#0096f6' // 100% 处的颜色
                       }],
                       global: false // 缺省为 false
                   },
               },
               emphasis: {
                   areaColor: '#0036bf' //鼠标悬停的颜色
               }
           }
       },{
           name: '濠江区',
           itemStyle: {
               normal: {
                   areaColor: { //地图色
                       type: 'linear',
                       x: 0,
                       y: 1,
                       x2: 0,
                       y2: 0,
                       colorStops: [{
                           offset: 0, color: '#0059e0' // 0% 处的颜色
                       }, {
                           offset: 1, color: '#0075eb' // 100% 处的颜色
                       }],
                       global: false // 缺省为 false
                   },
               },
               emphasis: {
                   areaColor: '#0036bf' //鼠标悬停的颜色
               }
           }
       },{
           name: '金平区',
           itemStyle: {
               normal: {
                   areaColor: { //地图色
                       type: 'linear',
                       x: 0,
                       y: 1,
                       x2: 0,
                       y2: 0,
                       colorStops: [{
                           offset: 0, color: '#0071e9' // 0% 处的颜色
                       }, {
                           offset: 1, color: '#008ff4' // 100% 处的颜色
                       }],
                       global: false // 缺省为 false
                   },
               },
               emphasis: {
                   areaColor: '#0036bf' //鼠标悬停的颜色
               }
           }
       },{
           name: '龙湖区',
           itemStyle: {
               normal: {
                   areaColor: { //地图色
                       type: 'linear',
                       x: 0,
                       y: 1,
                       x2: 0,
                       y2: 0,
                       colorStops: [{
                           offset: 0, color: '#0073ea' // 0% 处的颜色
                       }, {
                           offset: 1, color: '#0091f4' // 100% 处的颜色
                       }],
                       global: false // 缺省为 false
                   },
               },
               emphasis: {
                   areaColor: '#0036bf' //鼠标悬停的颜色
               }
           }
       },{
           name: '澄海区',
           itemStyle: {
               normal: {
                   areaColor: { //地图色
                       type: 'linear',
                       x: 0,
                       y: 1,
                       x2: 0,
                       y2: 0,
                       colorStops: [{
                           offset: 0, color: '#0082ef' // 0% 处的颜色
                       }, {
                           offset: 1, color: '#00aeff' // 100% 处的颜色
                       }],
                       global: false // 缺省为 false
                   },
               },
               emphasis: {
                   areaColor: '#0036bf' //鼠标悬停的颜色
               }
           }
       },{
           name: '南澳县',
           itemStyle: {
               normal: {
                   areaColor: { //地图色
                       type: 'linear',
                       x: 0,
                       y: 1,
                       x2: 0,
                       y2: 0,
                       colorStops: [{
                           offset: 0, color: '#0083f0' // 0% 处的颜色
                       }, {
                           offset: 1, color: '#0096f6' // 100% 处的颜色
                       }],
                       global: false // 缺省为 false
                   },
               },
               emphasis: {
                   areaColor: '#0036bf' //鼠标悬停的颜色
               }
           }
       }]
    }

其中x,y,x2,y2四个属性，相当于坐标系中的方向，范围从 0 - 1，相当于在图形包围盒中的百分比。

可以试着修改四个值，感受一下方向和效果的变化，找到自己想要的效果。