基于Echarts+百度地图+Three.js的数据可视化系统

上周重构项目数据统计部分写了几篇echarts相关的文章，重构的后台前端框架改用Vue，关于Vue中引用Echarts及可能遇到的问题的文章如下所示：

VUE中使用Echarts图表
VUE父组件异步获取数据，子组件接收的值为空
VUE渲染echarts图表宽度只显示100px问题

其中提到大学的时候echarts教程较少，想要做一些理想效果比较麻烦，正好记得大三的时候写了一个，基于Echarts+Three.js+百度地图的数据可视化系统，当时这个系统参加了计算机设计大赛，是拿了安徽省一等奖，全国二等奖，里面有写了几个关于Echarts的样式，当时的技术还比较菜，系统里面的代码仅供参考。

系统介绍视频【比赛演示视频】

下面就介绍下系统用到的Echarts+百度地图+Three.js：

一、Echarts开发介绍

关于echarts图表部分以下面这个图表进行介绍

这个图表使用的是带有涟漪特效动画的散点（气泡）图，利用动画特效可以将某些想要突出的数据进行视觉突出，在图表配置文件series中将type值设置成effectScatter就可以了。

上面效果的话，首先是把图表自带的一些样式给隐藏，主要在xAxis和yAxis更改一些属性，然后在series设置气泡的样式。关于鼠标在图表内移动展示的提示部分，主要是修改默认的提示框组件样式，将formatter方法返回的内容自定义成自己开发的组件样式，提示框组件部分如下所示：


// 该部分只是布局代码，样式写在上面的样式内
tooltip: {trigger: 'axis',axisPointer: {type: 'cross'},formatter: function (params) { // 当鼠标在图表的区域,设置提示栏的CSS样式return '<div class="echarts"><table><tr><td colspan=2""><img src="../libs/img/p.gif"></td></tr><tr><td>消防员姓名</td><td>' + params[0].name + '</td></tr><tr><td>所在楼层</td><td>' + params[0].value + '</td></tr><tr><td>当前温度</td><td>30</td></tr><tr><td>当前气压</td><td>20</td></tr><tr><td>状态</td><td>移动</td></tr></table> <img src="../libs/img/bj-1.png" alt="" class="bj-1"><img src="../libs/img/bj-2.png" alt="" class="bj-2"> <img src="../libs/img/bj-3.png" alt="" class="bj-3"><img src="../libs/img/bj-4.png" alt="" class="bj-4"></div>';}
}// 其中params参数里面包含了当前位置X轴、Y轴的数据

该图表代码如下所示【系统源码下载：h5-simple-visualization】：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" name="viewport"/><title></title><!--  引入echarts  --><script src="../libs/js/echarts.js"></script><style type="text/css">html, body {overflow: hidden;height: 100%;background: linear-gradient(#104BAA, #000000);margin: 0;padding: 0;}p, ul, li {margin: 0;padding: 0;list-style-type: none;}.index {margin-top: 135px;}.index .tit {width: 100%;height: 50px;font-size: 25px;text-align: center;font-family: Arial, 华文新魏;font-weight: bold;line-height: 50px;border-radius: 20px;color: #00FFCC;border-bottom: 1px solid #0099ff;box-shadow: 0 0 15px 1px #20558b;}.index .box {width: 96%;height: 1200px;margin-left: 2%;margin-top: 120px;border: 1px solid #0099ff;box-shadow: 0 0 15px 1px #20558b;border-radius: 25px;}.index .echart {width: 96%;height: 575px;margin-top: 20px;margin-left: 2%;padding-top: 20px;background-color: rgba(0, 24, 106, 0.5);border: 1px solid #20558b;box-shadow: 0 0 15px 1px #20558b;position: relative;}.index #main {width: 100%;height: 600px;}.echarts {width: 200px;height: 250px;color: #00FFCC;font-size: 20px;font-family: Arial, 华文新魏;background-color: rgba(0, 24, 106, 0.5);border: 1px solid #20558b;box-shadow: 0 0 15px 1px #20558b;position: relative;}.moddle {width: 96%;height: 500px;margin-top: 10px;margin-left: 2%;background-color: rgba(0, 24, 106, 0.5);border: 1px solid #20558b;box-shadow: 0 0 15px 1px #20558b;position: relative;}.moddle .ifra {width: 96%;height: 470px;margin-left: 2%;margin-top: 12px;}table {width: 100%;height: 250px;text-align: center;padding-top: 10px;}table img {width: 100%;height: 80px;}.bj-1 {position: absolute;left: -1px;top: -1px;}.bj-2 {position: absolute;right: -1px;top: -1px;}.bj-3 {position: absolute;right: -1px;bottom: -1px;}.bj-4 {position: absolute;left: -1px;bottom: -1px;}</style>
</head>
<body>
<div class="index"><div class="box"><div class="tit">消防员信息实时监控</div><div class="moddle"><iframe class="ifra" src="../libs/model/showModel.html"></iframe><img alt="" class="bj-1" src="../libs/img/bj-1.png"><img alt="" class="bj-2" src="../libs/img/bj-2.png"><img alt="" class="bj-3" src="../libs/img/bj-3.png"><img alt="" class="bj-4" src="../libs/img/bj-4.png"></div><div class="echart"><div id="main"></div><img alt="" class="bj-1" src="../libs/img/bj-1.png"><img alt="" class="bj-2" src="../libs/img/bj-2.png"><img alt="" class="bj-3" src="../libs/img/bj-3.png"><img alt="" class="bj-4" src="../libs/img/bj-4.png"></div></div>
</div>
</body>
</html><script>// 获取图表的ID值,并设置图表的主题风格let myChart = echarts.init(document.getElementById('main'), 'walden');let option = {title: {text: '所在楼层/层',left: '5%',textStyle: {color: '#00FFCC',fontFamily: '华文新魏',fontWeight: 'bold',fontSize: '25',align: 'center'}},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'},formatter: function (params) { // 当鼠标在图表的区域,设置提示栏的CSS样式return '<div class="echarts"><table><tr><td colspan=2""><img src="../libs/img/p.gif"></td></tr><tr><td>消防员姓名</td><td>' + params[0].name + '</td></tr><tr><td>所在楼层</td><td>' + params[0].value + '</td></tr><tr><td>当前温度</td><td>30</td></tr><tr><td>当前气压</td><td>20</td></tr><tr><td>状态</td><td>移动</td></tr></table> <img src="../libs/img/bj-1.png" alt="" class="bj-1"><img src="../libs/img/bj-2.png" alt="" class="bj-2"> <img src="../libs/img/bj-3.png" alt="" class="bj-3"><img src="../libs/img/bj-4.png" alt="" class="bj-4"></div>';}},toolbox: {show: true,right: '100',itemGap: 20,itemSize: '20',feature: {dataZoom: {yAxisIndex: 'none'},dataView: {readOnly: false},magicType: {type: ['pictorialBar', 'bar']},restore: {},saveAsImage: {}},iconStyle: {borderColor: '#00FFCC'}},xAxis: {data: ['消1号', '消2号', '消3号', '消4号', '消5号'],axisTick: {show: true},axisLine: {show: false},axisLabel: {textStyle: {color: '#00FFCC',fontFamily: '华文新魏',fontWeight: 'bold',fontSize: '20',}}},yAxis: {splitLine: {show: false},axisTick: {show: true},axisLine: {show: false},axisLabel: {show: true,textStyle: {color: '#00FFCC',fontFamily: '华文新魏',fontWeight: 'bold',fontSize: '20',}}},color: ['#ffffff'],series: [{name: '海拔高度',type: 'effectScatter',rippleEffect: {brushType: 'stroke'},symbolSize: 25,hoverAnimation: true,barCategoryGap: '-130%',symbol: 'circle',itemStyle: {normal: {color: '#FF00FF'},emphasis: {color: '#FF00FF'}},data: [5, 0, 1, 5, 3],z: 10}],};myChart.setOption(option);// 设置点击跳转方法,并传送图表X属性的值myChart.on('click', function (params) {if (params.name == '') {window.open('new_data.html?a=' + encodeURIComponent(params.name) + '');}});
</script>

二、百度地图开发介绍

系统使用百度地图主要是展示在地图上添加一些覆盖物，然后点击覆盖物到其详情页介绍，下面介绍接入流程：

因为这里用的是百度地图，首先的话要去百度地图开发者中心注册成为开发者，然后再控制台应用管理新建一个应用，应用类型选择浏览器端，白名单填写*即可，然后就能拿到应用的key，根据key的话就能调用百度地图。

因为我这个是两年前的系统，用到的地图代码和现在的不同，首先new的地图实例都改变了，具体的可以看下最新的文档。

主要就介绍下面几个方法：

createMap内Point里面是想要进入地图展示的位置，如下的经纬度和setCurrentCity方法设置的是滁州，进入系统地图就会缩进到滁州那里。
addMapOverlay方法就是设置地图上面的覆盖物，也就是想要在地图上面展示的自己的内容如上面的提示框组件，这里就是循环覆盖物数组，根据经纬度逐次展示覆盖物。
styleMap方法就是改变地图的样式，这里的话官方提供了工具个性化地图编辑器，我用的是官方的【眼眸】样式，在官网生成JSON文件，然后在styleJson设置下就行

百度地图代码如下所示【项目源码下载：h5-simple-visualization】：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><title></title><!--  引入百度地图，这里的key填写自己开发者创建应用的key --><script src="http://api.map.baidu.com/api?v=2.0&ak=" type="text/javascript"></script><!--  加载鼠标绘制工具  --><script src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js" type="text/javascript"></script><link href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" rel="stylesheet"/><!--  加载检索信息窗口  --><script src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js" type="text/javascript"></script><link href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" rel="stylesheet"/></head>
<body>
<div class="v_box"><div class="v_map" id="map" style="width: 100%;height: 500px;"></div>
</div>
</body>
<script type="text/javascript">// 初始化地图let map;initMap();// 创建和初始化地图函数：function initMap() {createMap();      //创建地图setMapEvent();    //设置地图事件addMapControl();  //向地图添加控件addMapOverlay();  //向地图添加覆盖物styleMap();     //地图个性化模板}function createMap() {map = new BMap.Map("map");map.centerAndZoom(new BMap.Point(118.339637, 32.305602), 15);map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));// 设置地图显示的城市 此项是必须设置的map.setCurrentCity("滁州");map.enableScrollWheelZoom(true);//添加城市列表map.enableInertialDragging();map.enableContinuousZoom();let size = new BMap.Size(10, 10);map.addControl(new BMap.CityListControl({anchor: BMAP_ANCHOR_TOP_LEFT,offset: size,}));}// 添加地图类型和缩略图function add_control() {map.addControl(mapType1);      // 2D图，卫星图map.addControl(mapType2);      // 左上角，默认地图控件map.addControl(overView);      // 添加默认缩略地图控件map.addControl(overViewOpen);  // 右下角，打开}function setMapEvent() {map.enableScrollWheelZoom();map.enableKeyboard();map.enableDragging();map.enableDoubleClickZoom()}function addClickHandler(target, window) {target.addEventListener("click", function () {});}function addMapOverlay() {let data_info = [[118.34264, 32.30297, "滁州市琅琊区消防支队"],[118.325967, 32.3142, "滁州市琅琊区消防支队"],[118.357013, 32.291738, "滁州市琅琊区消防支队"],[118.328842, 32.296133, "滁州市琅琊区消防支队"],[118.371961, 32.312735, "滁州市琅琊区消防支队"],[118.351264, 32.325429, "滁州市琅琊区消防支队"]];let opts = {width: 250,          // 信息窗口宽度height: 80,          // 信息窗口高度title: "",           // 信息窗口标题enableMessage: true  //设置允许信息窗发送短息};for (let i = 0; i < data_info.length; i++) {let myIcon = new BMap.Icon("../libs/img/x_1.png", new BMap.Size(50, 50), {offset: new BMap.Size(10, 25)// 设置图片偏移});let marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon: myIcon});  // 创建标注marker.setAnimation(BMAP_ANIMATION_BOUNCE);let content = data_info[i][2];map.addOverlay(marker); // 将标注添加到地图中addClickHandler(content, marker);marker.addEventListener('dbclick', function () {window.location.href = './detail.html';});}function addClickHandler(content, marker) {marker.addEventListener("click", function (e) {openInfo(content, e)});}function openInfo(content, e) {let p = e.target;let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);let infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象map.openInfoWindow(infoWindow, point); // 开启信息窗口}}// 向地图添加控件function addMapControl() {let navControl = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,type: BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(navControl);}// 个性化地图function styleMap() {let myStyleJson = [{"featureType": "road","elementType": "geometry.stroke","stylers": {"color": "#ff0000"}}];map.setMapStyle({styleJson: myStyleJson});// 这里放自己再样式生成器生成的jsonmap.setMapStyle({styleJson: []});}</script>
</html>

三、Three.js开发介绍

系统关于展示模型的部分，使用的是three.js技术，里面使用iframe将这个模型文件引入进来。这个部分比较麻烦些，因为不会自己建模，所以从网上一个模型网站下载了这个模型，然后使用3dmax将模型转成mtl和obj类型的文件，在PrepDataFile内设置下上述两个文件就行。

该部分three.js部分代码使用了学长在网上找的代码，消防车模型代码就是在系统里面建筑部分代码基础上修改的，这里代码太长了可以去项目看下libs/model/max_1.html文件。

three.js代码如下所示【项目源码下载：h5-simple-visualization】：

   // 这里代码大概在433行，可以看下libs/model/max_1.html文件var prepData = new THREE.OBJLoader2.WWOBJLoader2.PrepDataFile('1','','1.obj',  // 在这里设置自己的模型文件，就可以将模型引进来'','1.mtl'   // 在这里设置自己的模型文件，就可以将模型引进来);app.loadFiles(prepData);

下周的话准备出一篇《让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果》博文，解析转盘抽奖系统的前后端开发过程。

基于Echarts+百度地图+Three.js的数据可视化系统相关推荐

基于ECharts+百度地图开发散点扩散图
基于ECharts+百度地图开发散点扩散图用ECharts和百度地图,开发散点扩散图,显示TOP5的点. 1.引入Echarts3.2.3 js文件下载地址为:http://echarts.bai ...
基于python數據分析的疫情数据可视化系统
文章目录前言 1 课题背景 2 实现效果 2.1 整体界面展示 2.2 收集數據 3 實現過程 3.1 爬取疫情數據: 3.1.1 導包 3.1.2 實例化csv 3.1.3 防反爬 3.1.4 爬 ...
数据视化Echarts+百度地图API实现市县区级下钻
开始这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
vue全家桶+Echarts+百度地图，搭建数据可视化系统（项目）
vue全家桶+Echarts+百度地图,搭建数据可视化系统 1. 前言 1.1 业务场景突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未接触过Ech ...
地图统计_博客城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下如何在Vue 中使用 Echarts + 百度地图统计博客访问量并且通过QQWry 解析 ip 地址利用Echarts 展示出来效果图如下: 1.纯真Ip地址库 QQWry 这 ...
基于hadoop和echarts的教育大数据可视化系统毕设完整的代码+数据集
一.摘要在线教育平台现在是教育体系的重要组成部分,在当前大数据时代的背景下,促进教育机构建立统一平台.统一资源管理的数字化教学系统.如何评估系统平台的健康程度.学生的学习体验和在线课程的质量对于课 ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
使用echarts百度地图个性定制不生效
最近用vue写个地图页面,使用echarts百度地图个性定制不生效首先导入js // 使用基础的百度地图 <script src="http://api.map.baidu.com/ ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...

基于Echarts+百度地图+Three.js的数据可视化系统

基于Echarts+百度地图+Three.js的数据可视化系统相关推荐

最新文章

热门文章