vue+openlayer+echarts 在地图点位上添加柱状图

vue+openlayer+echarts 给地图点位添加柱状图

重点在方法addColumnChart()里，三步实现

在网上百度了很多相关文章，最终都无疾而终，只能硬着头皮自己摸索，好在功夫不负有心人，最终还是实现了在地图上，鼠标放上点位，显示对应的柱状图信息
鼠标放到点位上，会在左上角显示柱状图的数据，位置可调整

HTML

 <div id="map" ref="mapRef"></div>  地图容器<div id="chart" ref="chart"></div>  监测点的柱状图容器（  写完这篇博文之后发现了一个小问题，<div id="chart" ref="chart"></div>该div会在页面上占位置，会出现在地图容器下方，页面会有滚动条，解决办法就是给该div加一个display：none就OK了，并不会影响柱状图的定位和显示）

JS
1、引入地图跟echarts

  import Map from 'ol/Map';import Overlay from 'ol/Overlay';import View from 'ol/View';import Feature from 'ol/Feature';import Point from 'ol/geom/Point';import { Vector as VectorS, XYZ, ImageArcGISRest, TileArcGISRest } from 'ol/source';import { Tile as TileLayer, Image as ImageLayer, Vector as VectorLayer } from 'ol/layer';import { Style, Icon } from 'ol/style';import { fromLonLat} from 'ol/proj';import { toLonLat, proj } from 'ol/proj.js';import { CENTER_CENTER } from 'ol/OverlayPositioning';import { Sphere } from 'ol/sphere.js';import 'ol/ol.css';var echarts = require("echarts");

2、data
如果一个点位的柱状图上要显示多条数据，在dataColumn里的value中添加其他数据，修改echarts的相关配置即可

dataColumn:[{name: ['监测点1'],x: 109.302221,y: 27.787397,value: [3]},{name: ['监测点2'],x: 109.069956,y: 27.757735,value: [8]}, {name: ['监测点3'],x: 109.162517,y:27.671774,value: [5]},],

3、照openlayer官网，实现点位根据坐标定位到地图上去
4、mounted

this.chart = this.$refs.chart;
this.addColumnChart()

5、methods

guid () {  //为了生成不一样的id，实现每个装柱状图的盒子的唯一性var d = new Date().getTime();var guid = 'xxxx-xxxx-xxxx-xxxx'.replace(/[xy]/g,function (c) {var r = (d + Math.random() * 16) % 16 | 0;d = Math.floor(d / 16);return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);});return guid;},addColumnChart() {   //向点位添加柱状图的方法let _this=this;var html='';for (var i = 0; i < _this.dataColumn.length; i++) {     //1、循环每一条数据，生成id不同的div，//2、获取到该div，将柱状图添加上去，//3、 new Overlay，将每个柱状图添加到对应的点位上去var d = _this.dataColumn[i];var pt = fromLonLat([d.x, d.y]);var domid = "chart"+ _this.guid();    //生成不同的idhtml+="<div id='"+domid+"' style='width: 35px;height: 100px;margin-left: -18px;margin-bottom: -22px;'></div>"_this.chart.innerHTML=html;    //_this.chart为HTML里的柱状图容器，// 创建树状图var option = {};var myChart = echarts.init(document.getElementById(domid));option = {color: ['#c23531',],tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: {name: '监测点名称',data: d.name,show:false},yAxis: {max:'10',name: '浓度单位（mg/kg）',show:false},series: [{name: '汞浓度(mg/kg)',type: 'bar',data: d.value}]};myChart.setOption(option);
//将柱状图添加到指定点位上去var chart = new Overlay({id: domid,positioning: "bottom-center",element: document.getElementById(domid),offset: [0, 5],stopEvent: false  //overlay也支持滚珠放大缩小});_this.map.addOverlay(chart);   //_this.map是在mounted里new Map出来的，按openlayer官网操作即可，chart.setPosition(pt);}},

vue+openlayer+echarts 在地图点位上添加柱状图相关推荐

vue 中 echarts 中国地图
我们先来看一下效果说明:echarts 版本 "echarts": "^4.2.0-rc.2", 版本高的话,node_model 里面没有 map ...
ECharts 实现地图散点图上（转载）
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上) 小红 2016-04-28 ECharts, 教 ...
Vue使用Echarts绘画地图可视化
下载Echarts npm install echarts 效果一(城市标记点) 完整代码如下 <template><div class="chartBox"&g ...
echarts gl在地球上添加发光柱
最近搞地球效果试了很多方法,发现了一些好玩的效果 1.echarts图表根据值不同显示不同颜色 echarts有一个visualMap属性,在属性中可以实现根据值的不同,visualMap跟serie ...
vue引入echarts中国地图
需求:显示各省名字,滑过标记地显示接入数量,点击标记地显示系统数量已接入及能跳转对应页面信息的入口: 配置: 1.安装依赖 npm install echarts -S 2.全局引入main.js ...
vue使用echarts实现地图预警展示
vue安装依赖 npm install echarts -S main.js中引用 import echarts from 'echarts' Vue.prototype.$echarts = ech ...
Vue版本echarts 全国地图geo、geo3D
需求:大屏显示3D全国地图,点击地图上标记连接到指定页面,网上资源多数不是Vue版本的,实现的方式也是由html页面修改为Vue版本效果展示: 由于图片涉嫌违规,给大家一个自己脑补的 ...
vue搭配echarts做地图散点效果以及飞机迁徙图
记录一下自己vue项目中做的echarts地图分布散点效果 1.项目安装echarts 在已经生成的vue项目根目录运行安装echarts: npm install echarts -S 2.百度地图 ...
vue集成echarts map3d地图（省市下穿）
最近项目中需要集成echarts中的map3D地图,开发过程中遇到过不少问题,这里mark下,有遇到相应问题的伙伴欢迎一起交流相关源码下载 1.世界地图.js,中国地图.js,中国各省份地图.js ...

vue+openlayer+echarts 在地图点位上添加柱状图

vue+openlayer+echarts 给地图点位添加柱状图

重点在方法addColumnChart()里，三步实现

vue+openlayer+echarts 在地图点位上添加柱状图相关推荐

最新文章

热门文章