echarts实现伪3D地图、省会坐标涟漪、自动轮播、数据联动

已于 2023-10-10 10:23:04 修改
阅读量1.7k 收藏 5
点赞数 4
文章标签： echarts 前端 javascript
于 2023-10-09 18:14:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lionel_SSL/article/details/133711077
版权

效果图：

在这里插入图片描述
实现的效果：

  1. 伪3D效果地图
  2. 省会坐标展示标点，并带有涟漪效果
  3. 鼠标覆盖的区域，区域以及涟漪高亮
  4. 地图上的所有区域按照时间间隔轮播
  5. 点击、轮播时的区域，会带着所有其他表格的数据进行联动刷新，展示不同地区的统计数据

完整的JS代码：


let regions = [];
let orgRegions = [];// 初始状态颜色
var selectedAreaName = "";// 当前被选中/轮播地市
var mapName = 'NX';
var geoJson = mapData;

// 普通涟漪效果的标点
function convertNormalLianyiData(mapData) {
    var res = [];
    for (var i = 0; i < mapData.features.length; i++) {
        var prop = mapData.features[i].properties;
        //var geoCoord =  prop.center;// 标点位于地区省会
        var geoCoord = prop.centroid;// 标点位于地区正中心
        if (geoCoord && prop.name != selectedAreaName) {
            res.push({
                name: prop.name,
                // 横纵坐标后，拼接高度坐标，默认为10
                value: geoCoord.concat(100),
                adcode: prop.adcode,
            });
        }
    }
    return res;
}
// 选中区域涟漪效果的标点
function convertSelectedLianyiData(mapData) {
    var res = [];
    for (var i = 0; i < mapData.features.length; i++) {
        var prop = mapData.features[i].properties;
        //var geoCoord =  prop.center;// 标点位于地区省会
        var geoCoord = prop.centroid;// 标点位于地区正中心
        if (geoCoord && prop.name == selectedAreaName) {
            res.push({
                name: prop.name,
                // 横纵坐标后，拼接高度坐标，默认为10
                value: geoCoord.concat(100),
                adcode: prop.adcode,
            });
        }
    }
    return res;
}

for (i = 0; i < geoJson.features.length; i++) {
    let cityInfo = {
        name: geoJson.features[i].properties.name,
        adcode: geoJson.features[i].properties.adcode,
    }
    city.push(cityInfo);
}
for (i = 0; i < city.length; i++) {
    regions.push({
        name: city[i].name,
        adcode: city[i].adcode,
        itemStyle: {
            color: color[i % 10]
        },
    });
    orgRegions.push({
        name: city[i].name,
        adcode: city[i].adcode,
        itemStyle: {
            color: color[i % 10]
        },
    });
}

// 叠加图层构建立体效果
let addShadow = function (geo) {
    let max = 30;
    let upper = '#2768b6';
    let deeper = '#0e408a';
    for (let i = 0; i < max; i++) {
        geo.push({
            type: 'map',
            map: mapName,
            // 地图标签
            label: {
                show: false
            },
            layoutCenter: ['50%', '50%'],
            layoutSize: '80%',
            zlevel: -1 * i,
            itemStyle: {
                normal: {
                    color: 'rgba(39, 104 ,190, 1)',
                    borderColor: '#AEFBFF',
                    borderWidth: 1,
                    opacity: 0.8,
                    shadowColor: i < max / 2 ? upper : deeper,
                    shadowOffsetX: i * -1,
                    shadowOffsetY: i * 1.5,
                    shadowBlur: 1
                },
                emphasis: {
                    show: false,
                    color: "#fff",
                    // 地图区域被选中的颜色
                    areaColor: "rgba(0,254,233,0.6)",
                },
            },
            aspectScale: 1, //长宽比
            selectedMode: false, //是否允许选中多个区域
        });
    }
};
let geo = [
    {
        type: 'map',
        map: mapName,
        itemStyle: {
            normal: {
                areaColor: {
                    type: "linear",
                    x: 1200,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                        },
                    ],
                    global: true, // 缺省为 false
                },
                borderColor: "#fff",
                borderWidth: 0.2,
            },
            emphasis: {
                show: false,
                color: "#fff",
                // 地图区域被选中的颜色
                areaColor: "rgba(0,254,233,0.6)",
            },
        },
        // 地图标签
        label: {
            show: false
        },
        layoutCenter: ['50%', '50%'],
        layoutSize: '80%',
        zlevel: 0,
        aspectScale: 1, //长宽比
        selectedMode: false, //是否允许选中多个区域
    }
];
addShadow(geo);

option = {
    tooltip: {
        show: true, // 提示框
        trigger: 'item',
        formatter: function (params) {
            return params.name;
        }
    },
    geo: geo,
    series: [
        {
            type: 'map',
            map: mapName,
            itemStyle: {
                normal: {
                    areaColor: {
                        type: "linear",
                        x: 1200,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                            },
                        ],
                        global: true, // 缺省为 false
                    },
                    borderColor: "#fff",
                    borderWidth: 0.2,
                },
                emphasis: {
                    show: false,
                    color: "#fff",
                    // 地图区域被选中的颜色
                    areaColor: "rgba(0,254,233,0.6)",
                },
            },
            // 地图标签
            label: {
                show: false
            },
            zlevel: -1,
            aspectScale: 1, //长宽比
            selectedMode: false, //是否允许选中多个区域
            data: convertNormalLianyiData(mapData),
        },
        // 常规状态下的涟漪效果
        {
            // 动效散点公共配置项
            type: 'effectScatter',
            // 使用的坐标系
            coordinateSystem: 'geo',
            // 涟漪效果
            rippleEffect: {
                //涟漪特效
                color: '#f29130',
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 10 //波纹圆环最大限制，值越大波纹越大
            },
            symbol: 'circle',
            symbolSize: 15,
            label: {
                normal: {
                    show: true,
                    position: 'bottom', //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function (params) {
                        //圆环显示文字
                        return params.data.name;
                    },
                    textStyle: {
                        fontSize: 15,
                        color: 'white',
                        borderWidth: 15
                        //borderColor: 'orange'
                    }
                },
                emphasis: {
                    show: true
                }
            },
            // 城市坐标样式
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#fbc05d' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#ee8125' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                }
            },
            data: convertNormalLianyiData(mapData)
        },
        // 选中状态下的涟漪效果
        {
            // 动效散点公共配置项
            type: 'effectScatter',
            // 使用的坐标系
            coordinateSystem: 'geo',
            // 涟漪效果
            rippleEffect: {
                //涟漪特效
                color: '#1a6198',
                period: 4, //动画时间，值越小速度越快
                brushType: 'fill', //波纹绘制方式 stroke, fill
                scale: 15 //波纹圆环最大限制，值越大波纹越大
            },
            symbol: 'circle',
            symbolSize: 15,
            label: {
                normal: {
                    show: true,
                    position: 'bottom', //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function (params) {
                        //圆环显示文字
                        return params.data.name;
                    },
                    textStyle: {
                        fontSize: 15,
                        color: 'white',
                        borderWidth: 15
                        //borderColor: 'orange'
                    }
                },
                emphasis: {
                    show: true
                }
            },
            // 城市坐标样式
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#fbc05d' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#ee8125' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                }
            },
            data: convertSelectedLianyiData(mapData)
        }
    ]
};

function buildOption(context, eChartData, chartOption, echarts) {
    debugger
    echarts.registerMap(mapName, geoJson);
    startLunbo(context, true);
    // 初始化时立即广播宁夏
    if (context.vueContext) {
        let selectedCode = '640000';
        let msg = {
            //P_ND: "20220101",
            CZQH: selectedCode
        }
        context.vueContext.emit('sendMsg', msg)
    }
    chartOption = option;
    return chartOption;
};
var myChart;
var interval;
function onRender(context, eChartData, container, obj, instance) {
    debugger
    myChart = instance;

    // 鼠标移入轮播结束，移出轮播开始
    myChart.off('mouseover')
    myChart.on("mouseover", (params) => {
        clearInterval(interval);
        clearAllStyle();
        // 记录被选中的/轮播的区域
        selectedAreaName = params.name;
        resetScatter();
        setSelectedStyle();
        myChart.setOption(option);
    });
    myChart.off('mouseout')
    myChart.on("mouseout", () => {
        debugger

        selectedAreaName = "";
        resetScatter();

        //轮播函数开始
        clearInterval(interval);
        clearAllStyle();
        startLunbo(context);
        // 记录被选中的/轮播的区域



        myChart.setOption(option);


    });
    myChart.off('click')
    myChart.on("click", function (params) {
        // debugger

        // 点击区域的区划code
        let changeCode = params.region.adcode;
        if (changeCode && context.vueContext) {
            let msg = {
                //P_ND: "20220101",
                CZQH: changeCode
            }
            context.vueContext.emit('sendMsg', msg)
        }

        // 仪表盘的Id
        // let dashboardGuid = window['nvwa-dataanalyze-dashboard_0000018A39DD52A99D9A26069BCED0DE'].dashboardGuid;

        console.log('点击获取Params', params);
    });
};
/**
 * 
 * @param context 图表上下文参数
 * @param init 是否为第一加载：true:立即开启选中，false:时间间隔后开启选中
 */
function startLunbo(context, init = false) {
    // debugger
    // 保留当前选中地市的下标和颜色信息
    const lastSelectedArea = {
        index: 0,
        color: 'rgba(39, 104 ,190, 1)',
    };
    let _context = context;
    // 开始轮播,-1表示展示省级信息
    let mapIndex = -1;
    interval = setInterval(() => {
        if (mapIndex == -1) {
            clearAllStyle();
            if (!init) {
                // 广播宁夏
                if (_context.vueContext) {
                    let selectedCode = '640000';
                    let msg = {
                        //P_ND: "20220101",
                        CZQH: selectedCode
                    }
                    _context.vueContext.emit('sendMsg', msg)
                }
            }
            mapIndex++;

        } else {
            regions[lastSelectedArea.index].itemStyle.color = lastSelectedArea.color;
            let finishLunbo = (mapIndex == mapData.features.length);
            mapIndex = mapIndex % mapData.features.length;
            lastSelectedArea.index = mapIndex;
            lastSelectedArea.color = regions[lastSelectedArea.index].itemStyle.color;
            // 当前轮播被选中的地区颜色
            regions[mapIndex].itemStyle.color = '#ffffff';
            // regions[mapIndex].itemStyle.color = '#e2cd00';
            // 记录被选中的/轮播的区域
            selectedAreaName = regions[mapIndex].name;

            // 广播当前轮播的财政区划
            if (_context.vueContext) {
                let selectedCode = regions[mapIndex].adcode;
                let msg = {
                    //P_ND: "20220101",
                    CZQH: selectedCode
                }
                _context.vueContext.emit('sendMsg', msg)
            }
            if (finishLunbo == true) {
                // 全部轮询完成，从省级重新开始,下标恢复为-1
                mapIndex = -1;
            } else {
                mapIndex++;
            }

            for (let i = 0; i < option.geo.length; i++) {
                const geoItem = option.geo[i];
                geoItem.regions = regions;
            }

            resetScatter();
        }

        myChart.setOption(option);
    }, 15000);// 此处修改轮播的频率（单位毫秒）
}
// 清除所有地区被选中样式
function clearAllStyle() {
    // debugger
    for (let i = 0; i < option.geo.length; i++) {
        const geoItem = option.geo[i];
        geoItem.regions = orgRegions;
    }
    regions = [];
    for (i = 0; i < city.length; i++) {
        regions.push({
            name: city[i].name,
            adcode: city[i].adcode,
            itemStyle: {
                color: color[i % 10]
            },

        });
    }
    myChart.setOption(option);
}
// 重置涟漪效果
function resetScatter() {
    option.series[1].data = convertNormalLianyiData(mapData);
    option.series[2].data = convertSelectedLianyiData(mapData);
}
// 设置被选中地区样式
function setSelectedStyle() {
    // debugger
    // 被选中的地区颜色
    let selectedStyle = {
        color: "rgba(0,254,233,0.6)",
    }
    for (let i = 0; i < regions.length; i++) {
        const selectedItem = regions[i];
        if (selectedItem.name == selectedAreaName) {
            selectedItem.itemStyle = selectedStyle;
            break;
        }
    }
    for (let i = 0; i < option.geo.length; i++) {
        const geoItem = option.geo[i];
        geoItem.regions = regions;
    }
}
Lionel_SSL
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
echarts颜色地图伪3D（优化提示窗）（echarts篇.3）
地图之家
01-04 1076
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta na
echarts-3d地图数据源js格式
12-16
在本案例中，我们关注的是如何使用 ECharts 实现3D地图，并结合3D柱状图展示数据。"echarts-3d地图数据源js格式" 提供了一个名为 "china.js" 的数据源文件，这通常是包含了中国各地区地理信息和相关数据的JavaScript...
echarts 3D地图，地图区域点击触发事件
10-16
echarts 3D地图，地图区域点击触发事件，3d地图加数据
pseudo3DEngine:简单的伪3D引擎实现。该库使您可以制作二维地图并使用Ray-Cast绘制伪3D图像
03-21
伪3D引擎 简单的伪3D射击游戏实现。您可以制作二维地图并使用Ray-Cast绘制伪3D图像。 Neirokan： 网络系统被另一个工作系统取代 鱼眼校正 跳 现实的墙壁高度（严重的是，零高度的墙壁就像一个玩家的一半） 逼真的圆碰撞（不仅是10面墙） 反射仍然留在镜子里 菜单修复（按钮现在仅检测鼠标单击，而不显示按住） 当您切换到另一个窗口时，应用程序停止读取输入并移动光标 FPS限制（菜单中不再有600 fps） 缺少资源修复 小优化 演示此引擎如何工作： 纹理化的一些结果： 我们可以关闭纹理： 我们可以使地板光滑（性能高）： 该引擎可以执行一些镜像操作。如您所见，我们得到了正确的反射图像： 反射循环包括： 在线测试： 跳跃（但不使照相机垂直旋转）： 地图编辑器（导入.obj文件）：
echart实现3D地球和地图
最新发布
weixin_46011719的博客
06-19 747
echarts实现地球和地图，并包括飞线
echarts3D地图轮播展示数据
09-14
解决echarts gl不支持轮播tooltip的问题； 可运行的源代码
使用echarts+echarts-gl绘制3d地图，实现地图轮播效果
热门推荐
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
07-11 1万+
记录一下大屏开发中使用到的echarts-gl大屏的页面根据需求前前后后改了几个版本了，地图的样式也改了又改这里记录一下，因为echarts属性用到的比较多也比较杂，防止以后需要用到忘记了。
vue3+echart绘制中国地图并根据后端返回的坐标实现涟漪动画效果
m0_72929120的博客
01-03 885
【代码】vue3+echart绘制中国地图并根据后端返回的坐标实现涟漪动画效果。
3.（echarts篇）echarts颜色地图伪3D（优化提示窗）.zip
01-04
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122306496
vue中Echarts实现伪3D地图
q_qman的博客
10-21 3788
1.需求3d切面地图，颜色渐变，选中阴影，可切换地市，点击时展示地理数据，由于echarts 3d地图无法渐变，地图比例大小效果不好改成理想效果，所以通过伪3d方式实现。最终实现如下图： 2.代码 <template> <div ref="myEchart" class="map-echart"> </div> </template> <script> import echarts from 'echarts' export def
简单聊聊Echarts伪3D地图实现的相关配置
是小宗啊？的博客
04-28 3068
简单聊聊Echarts伪3D地图实现的相关配置
echarts地图3D效果
qq_35973440的博客
02-27 6159
echart图表3D效果 利用gco
echarts3d地图散点数据陷进地图的解决方案
10-25
本主题聚焦于“echarts3d地图散点数据陷进地图的解决方案”，这是一个在使用ECharts进行3D地图可视化时可能会遇到的问题。当数据点分布于地图上时，有时会出现数据点“下陷”至地图内部的现象，这通常是由于数据处理...
Echarts地图之——如何让地图显示出3d感
在车上在路上的博客
10-24 9245
上面几个是常用的地图配置，其他的配置如label、itemstyle、emphasis（高亮）、select（选中）则和其他的图表类似可以看文档，根据需要来修改配置。然后我们给地图添加阴影的效果，与其说是阴影不如说是地图下的错位图层，多加了几层所形成的效果。这里我们通过geo给地图添加其他图层，geo和我们刚才说的series内的配置基本一样。这样我们在原有图层的基础上添加了几层阴影效果，这样就会有3d的感觉了。当我们把该option配置完成时就能看到一个基础的地图了。然后地图的基本配置我们也是知道通过。
vue + echarts(5.2.1)仿3d地图
qq_42619759的博客
10-24 1858
vue + echarts(5.2.1)仿3d地图 飞线 坐标标点 区域默认选中 轮询选中区域
Echarts实现伪3D地图 + 自定义标准的实现小记
于离别之朝束起约定之花的博客
05-05 876
仅作为记录，欢迎参考，不喜勿喷 <template> <v-chart :option="option" autoresize></v-chart> </template> <script> import { mapState } from 'vuex'; import { use, registerMap } from 'echarts/core'; import { MapChart, EffectScatterChart } fro
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
xiaogeng0的博客
10-12 2774
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
VUE+echart绘制地图（伪3D）
一起学习一起进步~
04-28 478
首先我们需要创建一个div来盛放地图，这里的div必须给出对应的宽和高，不然地图无法显示！地图数据json可以根据自己的项目需求去修改，无固定要求！导入改vue界面，并以BaoJi表示。）和data数值即可。
记录使用Echarts-gl实现3D地图
LiuQjie的博客
06-05 7724
使用3D改变地图展示方向、标记坐标点显示
echarts实现伪3d环形饼状图
06-13
要实现伪3d环形饼状图，可以使用echarts中的pie图表，并使用其内置的3d功能。具体实现步骤如下： 1. 配置pie图表的基本参数，如legend、tooltip等。 2. 设置pie图表的半径，使其成为环形图。可以通过设置radius和labelLine的长度来实现。 3. 为pie图表添加3d功能。可以通过设置pie的depth和widthRatio参数来实现。depth表示图表的深度，widthRatio表示饼图的厚度。 4. 调整pie图表的角度，使其呈现出3d效果。可以通过设置pie的startAngle和endAngle参数来实现。 下面是一份示例代码，可以帮助您更好地理解如何实现伪3d环形饼状图： ```javascript option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, labelLine: { show: false }, data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], // 添加3d效果 depth: 30, widthRatio: 0.7, // 调整角度 startAngle: 225, endAngle: -45 } ] }; ``` 以上就是实现echarts伪3d环形饼状图的基本步骤和示例代码。希望能对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值