vue+echarts地图,vue echarts地图
本文主要介绍vue2项目中封装echarts地图的优雅方法，有需要的朋友可以参考一下。
目录
序知识效果图注1。vue 2中echarts 5.x以下版本与5.x以上版本的区别。记得打开vue.config.js中的运行时编译功能实现数据准备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以下版本
从“电子海图”导入电子海图
5.x及以上版本
从“echarts”导入*作为echarts
2、记得在vue.config.js中开启运行时编译功能
runtimeCompiler: true
实现
数据准备
-公共
-数据
- 4401.json
- mapdata.json
-图像
-map-ic.png
1.4401.json是广州地区的geojson数据，用于向echarts展示广州的区域地图。2.mapdata.json是仿真界面要求的假数据，你可以随意定制。在你得到数据后，你可以根据情况把它传送到封装的echarts map模块中。关于这里的仿真接口请求的知识，请参考这里：vue本地仿真服务器请求模拟数据。3.用于自定义map-ic.png地图弹出窗口的图片。
echarts地图模块封装
- src
-组件
-图表
-选项//用于存储各种图表的选项
-映射//映射选项
- index.js
具体代码如下：
从“echarts”导入*作为echarts
const getSimpleMap=(jsonMap，data，config)={
如果(！echarts.getMap(jsonMap.mark)) {
e charts . register map(JSON map . mark，jsonMap.json)
}
常量默认值配置={
工具提示：{
//窗口轮廓
触发器：“项目”，
填充：0，
边框宽度：0，
边框颜色： #FFFFFF ，
background color:“# FFFFFF”，
格式化程序：(params)={
常数{数据}=参数
const str=` div style= width:300 px；高度：98pxbox-shadow: 0px 4px 20px 0px rgba(0，0，0，0.8)；
颜色：# fff文本对齐：左对齐；边框-半径：6px
div style= background-color:rgba(102，182，255，1)；身高：44px行高：44px字体大小：14px字体粗细：400；边框-左上-半径：6pxborder-top-right-radius:6px；显示器：flex对齐项目：居中；
img style= width:13px；高度：16px左边距：24px右边距：3pxsrc= images/map-IC . png $ { data . name }
/div
div style= width:100%；身高：54px显示器：flex flex-wrap:wrap；
div style= display:flex；justify-content:space-between；宽度：100%；左填充：15px右填充：15px
div style= display:flex；对齐-项目：居中；宽度：132像素；
div style= font-size:12px；颜色：# 555555;右边距：10px 区号：/div
div style= font-size:14px；color:# 333333；${data.hoverObj==null？data.hoverObj.adcode}/div
/div
/div
/div
/div ` 1
返回字符串
}
},
地理位置：{
map: jsonMap.mark，
类型："地图",
布局中心：[50% , 50%],
布局过大："150%",
缩放：0.65,
漫游：假，
项目样式：{
正常：{
areaColor: rgba(201，229，255，1)，
阴影颜色： rgba(142，201，255，1)，
shadowOffsetX: -5，
shadowOffsetY: 12
}
}
},
系列：[
{
类型："地图",
map: jsonMap.mark，//自定义扩展图表类型
缩放：0.65,//缩放
动画时长：1200,
项目样式：{
//地图样式
正常：{
边框颜色： #FFFFFF ，
边界宽度：3,
areaColor: rgba(201，229，255，1)
}
},
标签:{
秀：真的，
颜色： #666666 ,
fontSize: 12，
fontWeight: 400
},
重点：{
//鼠标移入动态的时候显示的默认样式
标签:{
秀：真的，
颜色： #FFFFFF ，
fontSize: 15，
fontWeight: 600
},
项目样式：{
areaColor: rgba(102，182，255，1)，
边框颜色： #FFFFFF ，
边框宽度：2
}
},
布局中心：[50% , 50%],
布局过大："150%",
数据：数据
}
]
}
const opt=Object.assign({}，defaultConfig，Config)
const { legend，tooltip，series，geo，grid }=opt
const chartOpt={
网格，
传说，
工具提示，
地理，
系列
}
返回chartOpt
}
导出默认值{
getSimpleMap
}
自定义弹窗主要是在工具提示的格式程序里面实现，自定义好超文本标记语言弹窗，把参数里要显示的数据显示到对应的地方就好了。
个人喜欢直接纯超文本标记语言实现好设计给的弹窗样式，然后直接复制到格式程序里面。每次遇到不同的设计，就修改下格式程序里面的超文本标记语言和匹配下要显示的数据就行了。这里可以进一步封装的，有兴趣的可以试试。
页面调用
图表视图
class=地图视图
:chart-option=mapOpt
高度=100%
@click=handleMapClick /
1、图表选项=mapOpt 这个是给封装的展示地图模块的传参，接口数据要经过处理，具体看下一节2 、@click=handleMapClick 这里是点击地图时，对应区域的数据，用于有下一步的操作，例如地图下钻
接口数据处理
初始化映射(url) {
地图请求(url).然后((res)={
const mapData=res.data
const JSON map={ mark:this。mapname，json: mapData }
const data=mapdata。特色。映射((项目)={
const { name，adcode }=item.properties
设hoverObj={}
const objIndex=find elem(this。mappopdata， adcode ，adcode)
如果(objIndex！==-1) {
悬停obj=this。mappopdata[objIndex]
}否则{
hoverObj=null
}
返回{
姓名，
hoverObj
}
})
this.mapOpt=this .$eChartFn.getSimpleMap(jsonMap，data)
}).catch((err)={
console.log(错误，加载地图失败)
})
}
这里对地图矢量数据数据和接口返回数据进行匹配处理，达到弹窗数据是对应地区数据的效果。
地图矢量数据数据是必有行政区划代码字段的，所以接口数据mapPopData最好也是加上此字段，用来匹配。上面代码里的hoverObj是匹配好的每个区域的数据，最终形成数组数据，通过以下代码给封装的展示模块传参
this.mapOpt=this .$eChartFn.getSimpleMap(jsonMap，data)
详细内容请参考echartMapTest文件夹中的index.js文件。
代码总览
涉及的文件如下(具体参考代码):
-公共
-数据
- 4401.json
- mapdata.json
-图像
-map-ic.png
- src
- api
-map . js//获取地图geojson数据和地图弹出界面模拟数据。
-组件
-图表
-index . vue//图表单文件组件，用于接口调用
-index . js//自动导入选项中的图表选项
-选项//用于存储各种图表的选项
-映射//映射选项
- index.js
-视图
-echartmaptest//实例
- index.vue
- index.scss
- index.js
-实用工具
- utils.js
-main . js//e charts图表的全球介绍
代码
只要根据代码概述的目录查找代码即可。
总结
以上是echarts地图模块的封装和自定义弹出的实现。且便于使用和重复使用。
我刚刚发现www.makeapie.com最近停止服用它，它很有用。感谢这么多年的付出。
需要的话可以转到PPChart，这是替代品。
这就是这篇关于在vue2项目中封装echarts的优雅方法的文章。关于在vue2中封装echarts的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
参考资料
1.地图选择器2、Echarts2和vue的本地模拟服务器请求模拟数据3。在vue project 4中封装echarts的优雅方式。分离vue文件的css和js代码的简单技巧，便于阅读和开发。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。