AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-07-24 593
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 数据可视化大屏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。

文章标签：
JavaScript
前端开发
开发工具
容器
vr&ar
搜索推荐
数据可视化
定位技术
API
数据格式
关键词：
开发分析JavaScript
分析JavaScript
开发JavaScript
数据可视化JavaScript
ECharts涟漪
漏刻有时
目录
相关文章
我是快乐的嘟嘟
|
15天前
|
Web App开发 监控 JavaScript
监控和分析 JavaScript 内存使用情况
【10月更文挑战第30天】通过使用上述的浏览器开发者工具、性能分析工具和内存泄漏检测工具，可以有效地监控和分析JavaScript内存使用情况，及时发现和解决内存泄漏、过度内存消耗等问题，从而提高JavaScript应用程序的性能和稳定性。在实际开发中，可以根据具体的需求和场景选择合适的工具和方法来进行内存监控和分析。
我是快乐的嘟嘟
34 2
一缕微风绕指柔
|
1月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包：原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包：原理与实战
一缕微风绕指柔
43 1
lqj_本人
|
11天前
|
运维 监控 JavaScript
鸿蒙next版开发：分析JS Crash（进程崩溃）
在HarmonyOS 5.0中，JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash，包括异常捕获、日志分析和典型案例，帮助开发者定位问题、修复错误，提升应用稳定性。通过DevEco Studio收集日志，结合HiChecker工具，有效解决JS Crash问题。
lqj_本人
29 4
mao29955
|
20天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具，可以较为准确地检测 JavaScript 中的内存泄漏问题，并帮助我们找出潜在的泄漏点，以便采取相应的解决措施。
mao29955
132 9
土木林森
|
18天前
|
JavaScript 前端开发 开发者
前端框架对比：Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域，Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣，Vue.js以轻量级和易上手著称，适合快速开发小型到中型项目；Angular则由Google支持，功能全面，适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
土木林森
25 1
土木林森
|
19天前
|
JavaScript 前端开发 API
前端框架对比：Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架，介绍了它们的特点和优劣，并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手，适合小型项目；Angular结构化、功能强大，适合大型项目。
土木林森
16 1
小周sir
|
24天前
|
JavaScript 前端开发 开发者
探索JavaScript原型链：深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链：深入理解与实战应用
小周sir
28 1
白雾茫茫丶
|
1月前
|
SQL 前端开发 JavaScript
Nest.js 实战 (十五)：前后端分离项目部署的最佳实践
这篇文章介绍了如何使用现代前端框架Vue3和后端Node.js框架Nest.js实现的前后端分离架构的应用，并将其部署到生产环境。文章涵盖了准备阶段，包括云服务器的设置、1Panel面板的安装、数据库的安装、域名的实名认证和备案、SSL证书的申请。在部署Node服务环节，包括了Node.js环境的创建、数据库的配置、用户名和密码的设置、网站信息的填写、静态网站的部署、反向代理的配置以及可能遇到的常见问题。最后，作者总结了部署经验，并希望对读者有所帮助。
白雾茫茫丶
132 11
代码bug生产队
|
1月前
|
存储 JavaScript 前端开发
前端开发：Vue.js入门与实战
【10月更文挑战第9天】前端开发：Vue.js入门与实战
代码bug生产队
21 1
土木林森
|
16天前
|
前端开发 JavaScript
JavaScript新纪元：ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性，包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等，结合实战应用，展示如何利用这些新特性编写更加高效和优雅的代码。
土木林森
32 0

热门文章

最新文章

  • 1
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 2
    Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
  • 3
    echarts在.Net中使用实例(二) 使用ajax动态加载数据
  • 4
    echarts 标尺相关参数（visualMap属性设置）
  • 5
    Vue环境下，在单页面中遍历显示出多个Echarts图表
  • 6
    ECharts使用小笔记
  • 7
    Qt+ECharts开发笔记（一）：ECharts介绍、下载和Qt调用ECharts基础柱状图Demo
  • 8
    Echarts图——饼图动态
  • 9
    Echarts-地图全国主要城市的分布显示
  • 10
    Vue打包后Echarts图表不显示问题解决
  • 1
    js中如何使用工厂方式和构造函数创建对象，web开发项目实例
    42
  • 2
    js将json字符串还原为json对象
    78
  • 3
    掌握JavaScript中的二进制运算，提升你的编程技能！
    140
  • 4
    掌握值类型和引用类型，让你的JavaScript代码更上一层楼！
    65
  • 5
    深入理解Vue.js中的nextTick：实现异步更新的奥秘
    147
  • 6
    垃圾回收：JavaScript内存管理的利器
    55
  • 7
    Web Worker：JavaScript的后台任务解决方案
    151
  • 8
    函数柯里化：JavaScript中的高级技巧
    66
  • 9
    Babel：JavaScript代码的编译利器
    115
  • 10
    抽象语法树（AST）：理解JavaScript代码的抽象语法树
    205

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 【数据可视化】基础数据画图

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 【图生图】一键部署3D卡通风格模型
  • DataV平面地图组件入门
  • 图表样式智能美化工具
  • DataV模版快速创建可视化看板
  • 基于Kibana Lens进行数据可视化，灵活分析航班信息
  • 通过可观测可视化Grafana版进行数据可视化展示与分析
    • 下一篇
    阿里云OSS设置跨域访问