写点什么

Vue 进阶(幺玖幺):ECharts 实现地图功能

  • 2021 年 11 月 17 日
  • 本文字数:1827 字

    阅读完需:约 6 分钟

Vue进阶(幺玖幺):ECharts 实现地图功能

一、前言

无论Web端还是移动端均会存在应用地图展示数据信息的应用场景。应用场景如下:


全国地图



ToolTip



市级地图



县级地图


二、实现步骤

2.1 Map 初始化

initEcharts("china")
function initEcharts(map) { let option = {
geo: { map: map, roam: false, scaleLimit: { min: 1.2, max: 3 }, zoom: 1.2, //图形上的文本标签,可用于说明图形的一些数据信息 label: { normal: { show: true, fontSize: "10", color: "rgba(0,0,0,0.7)" } }, //地图区域的多边形 图形样式,有 normal 和 emphasis 两个状态 itemStyle: { //normal 是图形在默认状态下的样式; normal: { borderColor: "rgba(0, 0, 0, 0.2)" }, //emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。 emphasis: { areaColor: "#F3B329", shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: "rgba(0, 0, 0, 0.5)" } } }, series: [ { name: "信息量", type: "map", mapType: map, geoIndex: 0 // data: dataList } ] };
myChart.setOption(option);}
复制代码


有关各配参的详细说明,可参考ECharts官网

2.2 定义省份及市区数组

在定义省市区时,应注意区域规划的正确性。

2.3 点击事件处理

在实现地图下钻过程中,点击相应省份、市区时,可下钻至下一层级。


// 点击触发myChart.on("click", param => {  if (param.name in provinces) {    // 处理省模块    let names = param.name;    for (let key in provinces) {      if (names == key) {        showProvince(provinces[key], key);        break;      }    }  } else if (param.name in cityMap) {    // 处理市模块    let names = param.name;    for (let key in cityMap) {      if (names == key) {        showCitys(cityMap[key], key);        break;      }    }  }});
复制代码

2.4 下钻渲染

地图下钻过程中,需渲染下一层级地图。


//展示对应的省function showProvince(eName,param) {  console.log(eName, param)  $.getJSON(`/map/province/${eName}.json`, data=>{    that.$echarts.registerMap(param, data);    alert("省")    initEcharts(param);  })}

//展示对应市function showCitys(cName, param) { console.log(cName, param) // 显示县级地图 $.getJSON(`/map/city/${cName}.json`, data=>{ that.$echarts.registerMap(param, data); alert("县") initEcharts(param); })}
复制代码


在部署至服务器时,应注意.json文件目录获取的正确性,否则会造成下钻失败。

三、拓展阅读

四、延伸阅读

js获取url参数有两种情况:

4.1 应用场景一:内部页面之间互相传值

假如要从 A 页面跳转到 B 页面,


this.$router.push({path:"/B",query:{    Id : this.tId ,    ...}})
复制代码


进入 B 页面之后,


this.Id = this.$route.query.Id;
复制代码


就能将 A 页面的 id 传入 B 页面,进行参数获取。

4.2 应用场景二:外系统跳转 Vue 项目时自带参数

例如: https://shq5785.blog.csdn.net/list?Id=sunhuaqiang1#/


外系统跳转进入的url会在Vue项目编译后自动添加 “#/”后缀 ,其中带的参数在 “#/”之前,所以应用场景一中的方法无法获取,只能应用JS的方法来获取,解析功能函数如下所示:


getURLParams(url) {    let param = url.split('#')[0];           //获取#/之前的字符串    var paramContent = param.split('?')[1];  //获取?之后的参数字符串    var paramsArray = paramContent.split('&');    //参数字符串分割为数组    var paramResult = {};    //遍历数组,拿到json对象    paramsArray.forEach((item, index, paramsArray) => {    paramResult[paramsArray[index].split('=')[0]] = paramsArray[index].split('=')[1];    })    return paramResult;}
复制代码


调用方式如下:


this.getURLParams(window.location.href)
复制代码

4.3 拓展阅读

发布于: 3 小时前阅读数: 5
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(幺玖幺):ECharts 实现地图功能