echarts地图map鼠标移入区域颜色（渐变）

Cc_Debugger

于 2023-12-19 14:10:18 发布

阅读量1.1k

点赞数 8

分类专栏： echarts地图map 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Xiang_Gong_Ya_/article/details/135083338

版权

echarts地图map 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

鼠标移入透明

在这里插入图片描述

itemStyle下 emphasis属性

itemStyle: {
                //    # 在未设置dataRange或	visualMap时设置有效
                        normal: {
                            // borderColor: 'rgba(12, 222, 255, 1)',
                            // borderWidth: 0.8,
                            areaColor: {
                                type: 'linear-gradient',
                                x: 0,
                                y: 300,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(0,0,0, 1)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0,0,0, 0)',
                                    },
                                ],
                                global: true, // 缺省为 false
                            },
                        },
                        emphasis: {
                            shadowColor: 'rgba(0, 0, 0, 1)',
                            shadowBlur: 10,
                            shadowOffsetX: 5,
                            shadowOffsetY: 5,
                            areaColor: {
                                type: 'linear-gradient',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(243, 174, 48, 0)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(243, 174, 48, 0)',
                                    },
                                ],
                            },
                        },
                    },

   series: [
                    {
                        type: 'map',
                        map: 'area',
                        selectedMode: 'single',
                        aspectScale: 0.73,
                        layoutCenter: ['50%', '51%'], //地图位置
                        layoutSize: '100%',
                        // borderWidth: 20,
                        // borderColor: "#ccc",
                        itemStyle: {
                    //    # 在未设置dataRange或	visualMap时设置有效
                            normal: {
                                // borderColor: 'rgba(12, 222, 255, 1)',
                                // borderWidth: 0.8,
                                areaColor: {
                                    type: 'linear-gradient',
                                    x: 0,
                                    y: 300,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(0,0,0, 1)', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(0,0,0, 0)',
                                        },
                                    ],
                                    global: true, // 缺省为 false
                                },
                            },
                            emphasis: {
                                shadowColor: 'rgba(0, 0, 0, 1)',
                                shadowBlur: 10,
                                shadowOffsetX: 5,
                                shadowOffsetY: 5,
                                areaColor: {
                                    type: 'linear-gradient',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(243, 174, 48, 0)', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(243, 174, 48, 0)',
                                        },
                                    ],
                                },
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                fontFamily: 'SourceHanSansCN',
                                fontSize: '14',
                                color: '#FEFEFE',
                            },
                            emphasis: {
                                show: true,
                                fontFamily: 'SourceHanSansCN',
                                fontSize: '14',
                                color: '#FEFEFE',
                            },
                        },
    
                        zlevel: 1,
                        data: outdata,
                    },
                ],