echarts 地图层叠、外阴影、外边框、多层阴影样式

主要是应用geo这个属性：

export const baseOption = ({
    areaStr,
    scatterDara,
    zoom = 1.6,
    layoutSize = '80%',
    aspectScale = 0.8,
    layoutCenterOne = 55,
    layoutCenterTwo = 70
}) => {
    const hideArr = [{
            name: "南海诸岛",
            itemStyle: {
                // 隐藏地图
                normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                }
            },
            label: {
                show: false // 隐藏文字
            }
        },
        {
            name: "南海诸岛",
            itemStyle: {
                // 隐藏地图
                normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                }
            },
            label: {
                show: false // 隐藏文字
            }
        }
    ]
    const commonGeo = {
        map: areaStr,
        roam: false,
        label: {
            show: false
        },
        layoutSize,
        aspectScale,
        silent: true,
        zoom,
        regions: hideArr
    }

    return {
        geo: [{
                ...commonGeo,
                layoutCenter: [`${layoutCenterOne}%`, `${layoutCenterTwo}%`],
                itemStyle: {
                    normal: {
                        areaColor: '#2AF3FF',
                        shadowColor: '#2AF3FF',
                        shadowBlur: 20
                    },
                    emphasis: {
                        show: false
                    }
                }
            },
            {
                ...commonGeo,
                zlevel: 1,
                layoutCenter: [`${layoutCenterOne}%`, `${layoutCenterTwo - 0.5}%`],
                itemStyle: {
                    normal: {
                        areaColor: '#00DFFF',
                        borderColor: '#2AF3FF',
                    },
                    emphasis: {
                        show: false
                    }
                }
            },
            {
                ...commonGeo,
                zlevel: 2,
                layoutCenter: [`${layoutCenterOne}%`, `${layoutCenterTwo - 1.5}%`],
                itemStyle: {
                    normal: {
                        borderColor: '#00DFFF',
                        borderWidth: 2,
                    },
                    emphasis: {
                        show: false
                    }
                }
            }
        ],
        series: [{
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 30,
                symbol: 'circle',
                zlevel: 4,
                itemStyle: {
                    normal: {
                        color: '#0505FB'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        lineHeight: 12,
                        align: 'center',
                        formatter(row) {
                            return `{a|${row.name}\n${row.value[2]}}`
                        },
                        rich: {
                            a: {
                                color: '#fff',
                                fontSize: 6
                            }
                        }
                    }
                },
                data: scatterDara
            },
            {
                ...commonGeo,
                type: 'map',
                zlevel: 3,
                layoutCenter: [`${layoutCenterOne}%`, `${layoutCenterTwo - 1.5}%`],
                emphasis: {
                    label: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        show: false,
                        color: '#fff'
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#00256D',
                        borderColor: '#006AB6', // 省份边框颜色
                        borderWidth: 0.5 // 省份边框宽度
                    }
                },
                data: []
            }
        ]
    }
}

 

 

 

记录进步！！！