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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM