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、效果

 

posted @   Pavetr  阅读(3932)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
点击右上角即可分享
微信分享提示