运维开发网

vue2项目中封装echarts地图的优雅方法

运维开发网 https://www.qedev.com 2022-06-13 19:22 出处:网络
这篇文章主要给大家介绍了关于vue2项目中封装echarts地图的优雅方法,需要的朋友可以参考下


这篇文章主要给大家介绍了关于vue2项目中封装echarts地图的优雅方法,需要的朋友可以参考下


前言

在过去,我写过关于在vue项目中打包echarts的优雅方式。在大屏幕可视化中,除了数据图表外,还常用于显示省市地图区域。这是一篇姊妹文章。

当从区域地图中选择一个区域时,需要弹出窗口来显示数据,这些窗口具有各种样式,例如各种排列的数据、图片和文本的混搭以及视频................................................................................................................................


能学到的知识1、echarts地图模块封装,可复用2、echarts地图自定义弹窗(显示自定义样式、自定义数据、自定义图片),其它图表的自定义弹窗可参考。3、echarts地图自定义弹窗动态展示接口数据4、基于姐姐篇实现的,这个地图模块也是自适应的5、基于vue2 、vue cli3、echarts 5


效果图

先从上次的效果图说起,说明一下达到的效果。

1、广州区域地图2、自定义弹窗,显示选中地区的名称、区号,弹窗加了个小图片3、基本上图片、视频什么的,都可以在自定义弹窗上显示,这里只展示下自定义弹窗加图片的方式,视频同理的,不介绍了,有兴趣自己随便试试就好4、弹窗数据是从模拟接口取的



注意


1、vue中echarts 5.x以下版本和5.x以上版本引入的区别

5.x以下版本

import echarts from 'echarts'

5.x及以上版本

import * as echarts from 'echarts'


2、记得在vue.config.js中开启运行时编译功能runtimeCompiler: true


实现


数据准备|-- public|-- data|-- 4401.json|-- mapdata.json|-- images|-- map-ic.png1、4401.json是广州区域的geojson数据,用来给echarts显示广州的区域地图2、mapdata.json是模拟接口请求的假数据,自己随便自定义了,在获取数据后,看情况处理下传到封装好的echarts地图模块就行,这里模拟接口请求的知识可参考这里: vue本地模拟服务器请求mock数据3、map-ic.png地图自定义弹窗用到的图片


echarts地图模块封装|-- src |-- components |-- chart |-- options // 存放各种图表的option |-- map // 地图option |-- index.js

具体代码如下:

import * as echarts from 'echarts'const getSimpleMap = (jsonMap, data, config) =gt; { if (!echarts.getMap(jsonMap.mark)) { echarts.registerMap(jsonMap.mark, jsonMap.json) } const defaultConfig = { tooltip: { // 窗口外框 trigger: 'item', padding: 0, borderWidth: 0, borderColor: '#FFFFFF', backgroundColor: '#FFFFFF', formatter: (params) =gt; { const { data } = params const str = `lt;div style="width:300px;height: 98px;box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.8); color: #fff;text-align:left;border-radius: 6px;"gt; lt;div style="background-color: rgba(102, 182, 255, 1);height: 44px;line-height: 44px;font-size:14px;font-weight:400;border-top-left-radius: 6px;border-top-right-radius: 6px;display: flex;align-items: center;"gt; lt;img style="width: 13px;height:16px;margin-left: 24px;margin-right: 3px;" src="images/map-ic.png"gt;${data.name} lt;/divgt; lt;div style="width: 100%;height:54px;display: flex;flex-wrap: wrap;"gt; lt;div style="display: flex;justify-content: space-between;width: 100%;padding-left:15px;padding-right: 15px;"gt; lt;div style="display:flex;align-items:center;width:132px;"gt; lt;div style="font-size: 12px;color: #555555;margin-right:10px;"gt;区号:lt;/divgt; lt;div style="font-size: 14px;color: #333333;"gt;${data.hoverObj == null '' : data.hoverObj.adcode}lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt;` return str } }, geo: { map: jsonMap.mark, type: 'map', layoutCenter: ['50%', '50%'], layoutSize: '150%', zoom: 0.65, roam: false, itemStyle: { normal: { areaColor: 'rgba(201, 229, 255, 1)', shadowColor: 'rgba(142, 201, 255, 1)', shadowOffsetX: -5, shadowOffsetY: 12 } } }, series: [ { type: 'map', map: jsonMap.mark, // 自定义扩展图表类型 zoom: 0.65, // 缩放 animationDuration: 1200, itemStyle: { // 地图样式 normal: { borderColor: '#FFFFFF', borderWidth: 3, areaColor: 'rgba(201, 229, 255, 1)' } }, label: { show: true, color: '#666666', fontSize: 12, fontWeight: 400 }, emphasis: { // 鼠标移入动态的时候显示的默认样式 label: { show: true, color: '#FFFFFF', fontSize: 15, fontWeight: 600 }, itemStyle: { areaColor: 'rgba(102, 182, 255, 1)', borderColor: '#FFFFFF', borderWidth: 2 } }, layoutCenter: ['50%', '50%'], layoutSize: '150%', data: data } ] } const opt = Object.assign({}, defaultConfig, config) const { legend, tooltip, series, geo, grid } = opt const chartOpt = { grid, legend, tooltip, geo, series } return chartOpt}export default { getSimpleMap}

自定义弹出窗口主要在工具提示格式化程序中实现。自定义html弹出窗口,将要显示的数据以params的形式显示到相应的位置。

我个人喜欢直接用纯html实现设计好的弹出窗口样式,然后直接复制到formatter中。每次遇到不同的设计,只需修改formatter中的html和匹配下要显示的数据即可。这里可以进一步打包,有兴趣的可以试试。


页面调用lt;chart-view class="map-view" :chart-option="mapOpt" height="100%" @click="handleMapClick" /gt;1、 :chart-option=quot;mapOptquot;这个是给封装的echarts地图模块的传参,接口数据要经过处理,具体看下一节2、@click=quot;handleMapClickquot;这里是点击地图时,对应区域的数据,用于有下一步的操作,例如地图下钻


接口数据处理initMap(url) { mapRequest(url).then((res) =gt; { const mapData = res.data const jsonMap = { mark: this.mapName, json: mapData } const data = mapData.features.map((item) =gt; { const { name, adcode } = item.properties let hoverObj = {} const objIndex = findElem(this.mapPopData, 'adcode', adcode) if (objIndex !== -1) { hoverObj = this.mapPopData[objIndex] } else { hoverObj = null } return { name, hoverObj: hoverObj } }) this.mapOpt = this.$eChartFn.getSimpleMap(jsonMap, data) }).catch((err) =gt; { console.log(err, '加载地图失败') })}

这里将地图geojson数据和接口返回的数据进行匹配,达到弹出的数据是对应区域的数据的效果。

地图geojson数据必须有adcode字段,所以最好将该字段添加到接口数据mapPopData中进行匹配。上面代码中的HoverObj是每个区域的匹配数据,最后形成一个数组数据,由下面的代码传递给封装的echarts模块。

this.mapOpt = this.$eChartFn.getSimpleMap(jsonMap, data)

详细内容请参考echartMapTest文件夹中的index.js文件。


代码总览

涉及的文件如下(具体参考代码):

|-- public|-- data|-- 4401.json|-- mapdata.json|-- images|-- map-ic.png|-- src|-- api|-- map.js // 获取地图geojson数据、地图弹窗接口模拟数据 |-- components |-- chart |-- index.vue // 图表单文件组件,供界面调用 |-- index.js // 实现自动化导入options里的图表option |-- options // 存放各种图表的option |-- map // 地图option |-- index.js |-- views |-- echartMapTest // 实例所在 |-- index.vue |-- index.scss |-- index.js|-- utils|---utils.js|-- main.js // 全局引入echarts图表


代码

只要根据代码概述的目录查找代码即可。


总结

以上是echarts地图模块的封装和自定义弹出的实现。且便于使用和重复使用。

我刚刚发现www.makeapie.com最近停止服用它,它很有用。感谢这么多年的付出。

需要的话可以转到PPChart,这是替代品。

这就是这篇关于在vue2项目中封装echarts的优雅方法的文章。关于vue2封装echarts的更多信息,请搜索源搜网之前的文章或者继续浏览下面的相关文章。希望大家以后能多支持源搜网!


参考资料1、地图选择器2、Echarts2、vue本地模拟服务器请求mock数据3、vue项目中封装echarts的比较优雅的方式4、简单技巧分离vue文件的css、js代码,方便阅读开发

0

精彩评论

暂无评论...
验证码 换一张
取 消