echarts的map陰影效果

1、需求：要求地圖有陰影效果

2、思路：用geo創建一毛一樣的底圖加上陰影，放在series的圖下面，缺點就是不能用鼠標移動放大縮小，不然就暴露了下面的geo底圖。

3、實現：

let option = {
                visualMap: {
                    bottom: '10px',
                    left: 'right',
                    right: '60px',
                    min: 0,
                    max: this.max,
                    inRange: {
                        color: ['#154C91', '#32C5F6', '#24E3FA', '#13F1FC']
                    },
                    calculable: true
                },
                series: [
                    {
                        type: 'map',
                        roam: false,
                        map: 'mapJson',
                        layoutCenter: ['45%', '80%'],
                        layoutSize: '90%',
                        left: '20px',
                        top: 'bottom',
                        itemStyle: {
                            borderColor: '#2F8AE8'
                        },
                        label: {
                            //地圖默認的文本屬性
                            show: false,
                            color: '#2998E8'
                        },
                        select: {
                            //選中的區域文本屬性
                            label: {
                                color: '#2998E8'
                            },
                            itemStyle: {
                                color: '#3066ba'
                            }
                        },
                        emphasis: {
                            //高亮的區域文本屬性
                            itemStyle: {
                                areaColor: '#3066ba'
                            },
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#2998E8'
                                }
                            }
                        },
                        zoom: 1.4,
                        // 文本位置修正
                        textFixed: {
                            Alaska: [20, -20]
                        },
                        data: this.mapValueData
                    }
                ],
                geo: {
                    type: 'map',
                    roam: false,
                    map: 'mapJson',
                    layoutCenter: ['45%', '80%'],
                    layoutSize: '90%',
                    left: '20px',
                    top: 'bottom',
                    itemStyle: {
                        normal: {//陰影
                            areaColor: '#013C62',
                            shadowColor: '#01273F',
                            shadowOffsetX: 0,
                            shadowOffsetY: 25
                        },
                        borderColor: '#2F8AE8'
                    },
                    label: {
                        //地圖默認的文本屬性
                        show: false,
                        color: '#2998E8'
                    },
                    select: {
                        //選中的區域文本屬性
                        label: {
                            color: '#2998E8'
                        },
                        itemStyle: {
                            color: '#3066ba'
                        }
                    },
                    emphasis: {
                        //高亮的區域文本屬性
                        itemStyle: {
                            areaColor: '#3066ba'
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#2998E8'
                            }
                        }
                    },
                    zoom: 1.4,
                    // 文本位置修正
                    textFixed: {
                        Alaska: [20, -20]
                    }
                }
            }

4、效果