echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点

echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点

• 一、设置地图外边框
• 二、地图背景渐变
• 三、地图阴影,增加立体感
• 四、地图上打点

一、设置地图外边框

给地图添加外边框，同时地图中的区域添加细一点的边框。效果图如下：

这里涉及两种边框 ，分别在 geo 和 series 种设置 。主要代码如下：

option = {
    backgroundColor: '#000',//画布背景颜色
    geo: {
        show: true,
        map: 'china',
        label: {
            show: false
        },
        roam: false,
        itemStyle: {
            normal: {
                areaColor: '#000',
                borderWidth: 4, //设置外层边框
                borderColor:'#f8911b',
            },
            emphasis: {
                show: false,
                // areaColor: '#01215c'
            }
        }
    },
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: false
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: '#000',
                    borderColor: '#a18a3a',
                    borderWidth: 1
                },
                emphasis: {
                    show: false,
                    areaColor: null
                }
            },
        }
    ]
}

二、地图背景渐变

需要给地图整体添加渐变色，而不是给让地图中某一块区域进行渐变，效果图如下：

根据 echart 官网 areaColor 配置项，我们可以看出官方提供了 API 来填充地图区域的颜色。不仅支持纯色之外，还支持渐变色和纹理填充。主要代码实现如下：

itemStyle: {
    normal: {
        areaColor: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#24a0fa'
                }, {
                    offset: 1, color: '#15072a'
                }],
                global: false
            }
        },
        borderColor: '#a18a3a',
        borderWidth: 1,
       
    },
    emphasis: {
        show: false,
        areaColor: null
    }
},

三、地图阴影,增加立体感

效果图如下:

主要代码如下:

geo: {
    itemStyle: {
        normal: {
            shadowColor: 'rgba(1, 39, 44, 1)',
            shadowOffsetX: 0,
            shadowOffsetY: 8
        }
    }
},

四、地图上打点

效果图如下：

主要代码如下：

option = {
    ...
    series: [
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(data),
          symbolSize: 20,
          symbol: 'image://https://pic.ulecdn.com/item/user_0102/desc20190115/1fb19e0cf39aafef_-1x-1.png',
          symbolRotate: 35,
          label: {
              normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
              },
              emphasis: {
                  show: true
              }
          },
          itemStyle: {
              normal: {
                    color: '#F06C00'
              }
          }
        },
        ...
    ]
}