六月下旬全新资源上线!丨 解锁高效能实战方案

更新亮点:本次新增6大专题10项资源,更有王炸课程重磅登场,点击标题了解!(参与互动赢取麦豆,解锁更多内容)

王炸专区:场景化数据分析实战

一站式贯通数据驱动全流程,从需求洞察→数仓开发→模型构建→可视化呈现,手把手带你构建决策引擎,助你秒变企业决策智多星!

二、实战技巧分享

即席/透视的逆袭之路:从卡顿到秒出→ 性能优化实战,实现报表秒级响应!

体验中心焕新一“夏”,全新导览页及新DEMO上线!→ 抢先体验夏季更新DEMO!

速看!明细/汇总/交叉表的实现秘籍→ 高效构建复杂报表指南

三、开发技能突破

视频课《仪表盘图片鼠标提示几行代码,让你的仪表盘“会说话”!

视频课《仪表盘宏开发技巧→ 解锁宏开发技巧和注意事项

四、直播上线

直播《交互式仪表盘最佳实践解锁可视化大屏最佳实践技巧

五、AI每日一学

人工智能三驾马车:算法、算力与数据→ 深度解析AI核心支柱

通俗的讲一下神经网络模型的基本组成、工作原理、工作类型和生活应用场景→ 从基础到场景实战

六、资源上新

插件《安全检测→ 一键加固系统安全防护

麦粉社区
>
帖子详情

地图

数据分析 发表于 2023-7-20 14:07
发表于 2023-7-20 14:07:44

涟漪散点和区域组合地图,将地图区域修改成江苏省或其他省地图消失了,我检查过了是宏代码3D的问题,但我不知道这个宏代码哪里有问题,我又需要这个3D的宏代码



发表于 2023-7-20 14:07:45
这个宏是哪里来的呢?要是你自行实现的就发回来看看呗
  •   薛贝贝
    是系统自带的呀,demo里就有,我直接贴出来吧
    2023-7-20 14:36| 回复
  •   薛贝贝
    /******************************宏代码说明******************************
     * 类型:ClientSide
     * 对象:柱状地图
     * 事件:onBeforeRender
     * 效果描述:绘制两个地图, 实现伪3D样式以及外边框发光
     * 简述实现步骤:
     * (1) 通过添加geo组件,修改各个组件的样式以及位置从而达到效果
     *********************************************************************/
    
    /**
     * 设置项
     *  borderColor:边框颜色
     *  borderWidth:边框宽度
     *  shadowBlur:发光大小
     *  shadowColor:发光颜色
     *  shadowOffsetX:较原位置的x轴偏移
     *  shadowOffsetY:较原位置的y轴偏移
     */
    type GeoItemStyle = {
        borderColor: string,
        borderWidth: number,
        shadowBlur: number,
        shadowColor: string,
        shadowOffsetX: number,
        shadowOffsetY: number,
    }
    
    type DeviationItemStyle = {
        areaColor: string,
        shadowColor: string,
        shadowOffsetX: number,
        shadowOffsetY: number,
    }
    
    function main(page: IPage, portlet: IEChartsPortlet) {
        let config = {
            type: ['ECHARTS_MAP']
        }
        let type = portlet.getType();
        if (config.type.indexOf(type) < 0) return;
    
        let options = portlet.getChartOptions();
        let geo;
        if (options.geo instanceof Array) {
            geo = options.geo[0];
        } else {
            geo = options.geo;
            options.geo = [];
        }
        console.log(options.geo)
        //最上层的地图样式
        geo.label = {//区域标签设置
            normal: {
                show: false,
            },
            emphasis: {
                textStyle: {
                    color: '#FFFFFF',//标签高亮颜色
                },
            },
        };
        geo.itemStyle = {
            borderColor: 'rgba(43,155,216,0.5)',        //新地图边框颜色
            borderWidth: 0.8,         //边框宽度
            areaColor: '#1E4747',          //区域颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)',          //阴影颜色
            shadowBlur: 0,                              //阴影模糊大小
            shadowOffsetX: 0,                           //模糊大小水平偏移量
            shadowOffsetY: 0,
            emphasis: {
                areaColor: '#B4F4FF'
            }
        }
        geo.itemStyle = {
            normal: {
                borderColor: 'rgba(147, 235, 248, 0.2)',
                borderWidth: 0.5,
                areaColor: 'rgba(19, 68, 105, 1)',
                opacity: 1,
            },
            emphasis: {
                areaColor: '#2AB8FF'
            }
        }
        geo.emphasis = {
            label: {
                color: '#fff',
            },
            itemStyle: {
                shadowOffsetY: 0,
            }
        }
        geo.tooltip = {
            show: false
        };
        geo.zlevel = 0;//设置优先级
        options.geo.push(geo);
    
        //地图边框&阴影样式设置
        /**********************开始配置*********************/
        let geoFrameItemStyle: GeoItemStyle = {
            borderColor: '#02e6f0',
            borderWidth: 3,
            shadowBlur: 12,
            shadowColor: 'rgba(2,230,240,0.6)',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
        }
        /**********************结束配置*********************/
        let geoFrame = getGeoItemStyleShadow(-1, geoFrameItemStyle, options.geo[0]);
        options.geo.push(geoFrame);
    
        //地图图层偏移形成3D效果
        /**********************开始配置*********************/
        let deviationItemStyle: DeviationItemStyle = {
            areaColor: '#013C62',           
            shadowColor: '#143b50',
            shadowOffsetX: -1,
            shadowOffsetY: 15,
        }
        /**********************结束配置*********************/
        let geoShadow = getGeoItemStyleDeviation(-2, deviationItemStyle, options.geo[0]);
        options.geo.push(geoShadow);
    }
    
    //获取geo的样式
    function getGeoItemStyleShadow(zlevel: number, geoItemStyle: any, geo: any) {
        return {
            type: 'map',
            map: geo.map,
            zoom: geo.zoom,
            zlevel: zlevel,//图层显示顺序,数值大的会覆盖在小的上面
            roam: false,
            tooltip: {
                show: false
            },
            label: {//区域标签设置
                normal: {
                    show: false,//若想地图上显示区域名称,设置为true
                },
            },
            itemStyle: geoItemStyle,
        }
    }
    
    /*
     * 获取geo的样式
     */
    function getGeoItemStyleDeviation(zlevel: number, geoItemStyle: any, geo: any) {
        return {
            type: 'map',
            map: geo.map,
            zoom: geo.zoom,
            zlevel: zlevel,//图层显示顺序,数值大的会覆盖在小的上面
            roam: false,
            tooltip: {
                show: false
            },
            label: {//区域标签设置
                normal: {
                    show: false,//若想地图上显示区域名称,设置为true
                },
            },
            itemStyle: geoItemStyle,
            regions: hideRegions()
        }
    }
    
    //返回隐藏右下角地图的信息
    function hideRegions() {
        let regions = [
            {
                name: "南海诸岛",
                itemStyle: {
                    // 隐藏地图
                    normal: {
                        opacity: 0, // 为 0 时不绘制该图形
                    }
                },
                label: {
                    show: false // 隐藏文字
                }
            }
        ]
        return regions;
    }
    2023-7-20 14:36| 回复
  •   薛贝贝
    也不知道是版本问题,还是啥问题,这个宏以前用的时候没有任何问题
    
    2023-7-20 14:37| 回复
  •   薛贝贝
    是版本问题吗?
    
    2023-7-20 14:38| 回复
  •   没必要理会
     回复 薛贝贝
    这种就说明宏不适应,我也不懂宏要怎么改,实在需要的话建议联系官方渠道申请定制资源去重新实现宏吧
    2023-7-20 15:56| 回复

回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

6回帖数 0关注人数 803浏览人数
最后回复于:2023-7-20 14:34
快速回复 返回顶部 返回列表