数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)

简介: 数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)

系列文章目录

燃,拿来即用!Echarts动态排名柱状图(自适应电脑和手机端)

漏刻有时数据可视化Echarts组件开发(27):盒须图(箱线图)前后端php交互的实战案例

漏刻有时数据可视化Echarts组件开发(26):全国地图三级热力图下钻和对接api自动调用数据开发实录

漏刻有时数据可视化Echarts组件开发(25):引导线labelLine和散点图scatter的开发

漏刻有时数据可视化Echarts组件开发(24):本地离线的地图下钻与散点图

漏刻有时数据可视化Echarts组件开发(23):世界地图动态时间轴的散点气泡图

漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化

漏刻有时数据可视化Echarts组件开发(18):渐变透明柱状图和地图map结合的案例

漏刻有时数据可视化Echarts组件开发(17):值域漫游图

漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图

漏刻有时数据可视化Echarts组件开发(6):象形柱图实现水塔水位的动画

Echarts实战案例代码(59):geomap实现飞线、散点、引导线以及重叠label的解决

漏刻有时数据可视化Echarts组件开发(7):geo地图map3D组件的定时高亮轮播的解决方案

Echarts实战案例代码(46):带渐变背景颜色的倾斜角度的图表的CSS样式表解决方案


文章目录

系列文章目录

前言

项目说明

一、引入外部文件

二、构建dom容器

三、核心代码开发

1.散点数据格式

2.bmap参数配置

3.series组件参数配置

4.自适应浏览器大小

5.百度地图接口对接

6.百度地图个性化配置参数

总结


前言


3827d10d48464aa8a86fe55e030242b4.gif


项目说明

百度地图和echarts的结合使用,是数据可视化大屏开发过程中最亮眼的搭配组合,而连接两者之间关系的就是bmap.js。本项目主要涉及到:


百度地图的引入;

百度地图个性化配置;

echarts组件bmap的调用和参数设置;

echarts散点图组件的调用;

echarts路径图组件的调用;

按照数据的不同条件判断柱图颜色;


一、引入外部文件

其中lock_blue.js是个性化地图配置的外部文件,以便减少主体文件的体积大小;

//api.map.baidu.com/,采用自适应http和https协议头的写法,因此在预览时必须通过web服务器方式浏览;

    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript"
            src="//api.map.baidu.com/api?v=3.0&ak=3HGqGo1RHf8zsLZ***"></script>
    <script type="text/javascript" src="js/bmap.min.js"></script>
    <!--百度个性化地图-->
    <script type="text/javascript" src="js/skins/lock_blue.js"></script>


二、构建dom容器

<div id="container" style="height: 100%;"></div>



三、核心代码开发

1.散点数据格式

在项目应用,可以按照该格式生成API,通过封装函数进行调用和定时刷新。

  • name,地市名称,格式:string;
  • value,经纬度坐标,格式:array;
  • data,柱图高度,格式:number;
    //散点图标准数据格式;
    var scrData = [
        {"name": "杭州市", "value": [120.203437, 30.253831], data: 40},
        {"name": "成都市", "value": [104.098202,30.595856], data: 20},
        {"name": "上海市", "value": [121.473641, 31.223825], data: 50},
        {"name": "长沙市", "value": [112.89211,28.27699], data: 40},
        {"name": "西安市", "value": [108.955088,34.429473], data: 78},
        {"name": "北京市", "value": [116.418642,39.906744], data: 18},
        {"name": "兰州市", "value": [103.857887,36.146224], data: 38}
    ]

2.bmap参数配置

具体涵义见注释

        bmap: {
            center: [121.554586, 29.813444],//默认中心点;
            zoom: 5,//国家级:5,省级:8,市级:10,街道级:12
            roam: true, //是否开启平游或缩放
            mapStyle: mapStyle// {style: 'midnight'}//grayscale,googlelite
        },

3.series组件参数配置

series: [
            {
                type: 'lines',
                coordinateSystem: 'bmap',
                zlevel: 5,
                effect: {
                    symbolSize: 2 // 图标大小
                },
                lineStyle: {
                    width: 10, // 尾迹线条宽度
                    color: function (params) {
                        //console.log(params);
                        if (params.name == "上海市" || params.name == "北京市") {
                            return '#F7AF21';
                        } else {
                            return 'rgb(22,255,255, 1)';
                        }
                    },
                    opacity: 0.7, // 尾迹线条透明度
                    curveness: 0 // 尾迹线条曲直度
                },
                label: {
                    show: false,
                    position: 'end',
                },
                silent: true,
                data: getBodyData(scrData, getMax(scrData))
            },
            // 柱状体的顶部
            {
                type: 'scatter',
                coordinateSystem: 'bmap',
                zlevel: 5,
                label: {
                    show: true,
                    formatter: function (params) {
                        //console.log(params)
                        return "产值:" + params.data.value[2];
                    },
                    position: "top"
                },
                symbol: 'circle',
                symbolSize: [10, 5],
                itemStyle: {
                    color: function (params) {
                        // console.log(params);
                        if (params.name == "上海市" || params.name == "北京市") {
                            return '#F7AF21';
                        } else {
                            return 'rgb(22,255,255, 1)';
                        }
                    },
                    opacity: 1
                },
                silent: true,
                data: getTopData(scrData, getMax(scrData))
            },
            // 柱状体的底部
            {
                type: 'scatter',
                coordinateSystem: 'bmap',
                zlevel: 4,
                label: {
                    formatter: '{b}',
                    position: 'bottom',
                    color: '#fff',
                    fontSize: 12,
                    distance: 10,
                    show: false
                },
                symbol: 'circle',
                symbolSize: [10, 5],
                itemStyle: {
                    color: function (params) {
                        if (params.name == "上海市") {
                            return '#F7AF21';
                        } else {
                            return 'rgb(22,255,255, 1)';
                        }
                    },
                    opacity: 1
                },
                silent: true,
                data: scrData
            },
            // 底部外框
            {
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                zlevel: 4,
                label: {
                    show: false
                },
                rippleEffect: {
                    scale: 2,
                    brushType: "fill"
                },
                symbol: 'circle',
                symbolSize: [20, 10],
                itemStyle: {
                    color: function (params) {
                        if (params.name == "上海市" || params.name == "北京市") {
                            return '#F7AF21';
                        } else {
                            return 'rgb(22,255,255, 1)';
                        }
                    },
                    opacity: 1
                },
                silent: true,
                data: scrData
            }
        ]

通过 color: function (params){}回调函数进行判断和设置,在实际开发过程中,可以封装为一个函数,进行便捷调用。

 color: function (params) {
                        //console.log(params);
                        if (params.name == "上海市" || params.name == "北京市") {
                            return '#F7AF21';
                        } else {
                            return 'rgb(22,255,255, 1)';
                        }
                    },


be4991e5253b46cf9e7ec78dc3f58e55.png


4.自适应浏览器大小

本案例在开发过程中,散点有明显的滑动动画;且在全屏的时候,散点无法自动紧贴地图,经过多次尝试,设置了定时 myChart.resize()效果。

    myChart.setOption(option);
    window.addEventListener("resize", function () {
        setTimeout(function () {
            myChart.resize();
        }, 200)
    });

5.百度地图接口对接

    // 百度地图接口对接设置;
    var map = myChart.getModel().getComponent('bmap').getBMap();
    //map.enableScrollWheelZoom(true);
    //卫星地图
    //map.setMapType(BMAP_SATELLITE_MAP);
    //地图控件;
    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));

6.百度地图个性化配置参数

var mapStyle = {
    styleJson: [
        {
            featureType: 'water',
            elementType: 'all',
            stylers: {
                color: '#044161'
            }
        },
        {
            featureType: 'land',
            elementType: 'all',
            stylers: {
                color: '#004981'
            }
        },
        {
            featureType: 'boundary',
            elementType: 'geometry',
            stylers: {
                color: '#064f85'
            }
        },
        {
            featureType: 'railway',
            elementType: 'all',
            stylers: {
                visibility: 'off'
            }
        },
        {
            featureType: 'highway',
            elementType: 'geometry',
            stylers: {
                color: '#004981'
            }
        },
        {
            featureType: 'highway',
            elementType: 'geometry.fill',
            stylers: {
                color: '#005b96',
                lightness: 1
            }
        },
        {
            featureType: 'highway',
            elementType: 'labels',
            stylers: {
                visibility: 'off'
            }
        },
        {
            featureType: 'arterial',
            elementType: 'geometry',
            stylers: {
                color: '#004981'
            }
        },
        {
            featureType: 'arterial',
            elementType: 'geometry.fill',
            stylers: {
                color: '#00508b'
            }
        },
        {
            featureType: 'poi',
            elementType: 'all',
            stylers: {
                visibility: 'off'
            }
        },
        {
            featureType: 'green',
            elementType: 'all',
            stylers: {
                color: '#056197',
                visibility: 'off'
            }
        },
        {
            featureType: 'subway',
            elementType: 'all',
            stylers: {
                visibility: 'off'
            }
        },
        {
            featureType: 'manmade',
            elementType: 'all',
            stylers: {
                visibility: 'off'
            }
        },
        {
            featureType: 'local',
            elementType: 'all',
            stylers: {
                visibility: 'off'
            }
        },
        {
            featureType: 'arterial',
            elementType: 'labels',
            stylers: {
                visibility: 'off'
            }
        },
        {
            featureType: 'boundary',
            elementType: 'geometry.fill',
            stylers: {
                color: '#029fd4'
            }
        },
        {
            featureType: 'building',
            elementType: 'all',
            stylers: {
                color: '#1a5787'
            }
        },
        {
            featureType: 'label',
            elementType: 'all',
            stylers: {
                visibility: 'off'
            }
        }
    ]
}


总结

1.Echarts地图扩展插件bmap.min.js,将其引入后可以在echarts.series.map.coordinateSystem 中直接使用参数’bmap’ ,即: `coordinateSystem: ‘bmap’。同时在开发过程中, bmap.min.js和Echarts的版本也有关系,建议从git中下载对应的版本;

2.如果要操作百度地图,如加上百度地图的相关控件,可以通过 v`ar map = myChart.getModel().getComponent(‘bmap’).getBMap()获取地图对象,然后就可以按照百度地图相关操作方法进行配置,具体参见百度地图开放平台API。

相关文章
|
1月前
|
存储 安全 API
Next.js 实战 (九):使用 next-auth 完成第三方身份登录验证
这篇文章介绍了next-auth,一个为Next.js设计的身份验证库,支持多种认证方式,如电子邮件和密码、OAuth2.0提供商(如Google、GitHub、Facebook等)以及自定义提供商。文章包含了如何配置Github Provider以及会话管理,并提到了适配器Adapters在next-auth中的作用。最后,文章强调了next-auth的强大功能值得进一步探索。
74 10
|
1月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
90 33
|
1月前
|
中间件 API
Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中,作者遇到了打包构建时的一系列报错,报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整,作者最终删除了lodash-es库,并将radash的部分源码复制到本地,解决了打包报错的问题。文章最后提供了项目的线上预览地址,并欢迎读者留言讨论更好的解决方案。
41 10
|
2月前
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
|
1月前
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
|
28天前
|
监控 安全 中间件
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
|
2月前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
2月前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
105 5
|
2月前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
3月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
57 2

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57