菲洛嘉青春动能素135HA FILLMED® NCTF 135HA LED指示灯的常见故障分析 智微智能 Elkhartlake K075终端,零售产业新选择 天空蓝拓客管理系统详细介绍版 muso公链项目 天使计划 是什么?[秘] 独家揭秘最前沿的家装“黑科技”——掌赋 天博体育欧洲杯特辑,东道主法兰西的失意2016 亚马逊的送货侦察员 学习听起来像挡泥板 Google Comics Factory使ML变得容易 笑着说-男性或女性 Amazon Rekognition中更好的人脸检测 关于Spaun的真相-大脑模拟 两个聊天机器人彼此聊天-有趣又怪异 GANPaint:将AI用于艺术 WCF和WF给予社区 从耳朵到脸 所有神经网络的深层缺陷 蠕虫在尾巴上平衡杆子 Kickstarter上的OpenCV AI套件 TensorFlow-Google的开源AI和计算引擎 众包取代新闻工作者 Google的DeepMind学会玩街机游戏 哑机器人V智能机器人 .NET与.NET 5融为一体 Google的深度学习-语音识别 LInQer将.NET LINQ移植到Javascript 机器人TED演讲-新的图灵测试? GAN的发明者加入苹果 您的智能手机会监视您键入的内容 人工智能帮助改善国际象棋 Zalando Flair NLP库已更新 TensorFlow 1.5包含移动版本 AlphaGo输了一场比赛-比分3-1 虚拟机器学习峰会 Microsoft开源AI调试工具 SharePoint走向移动 F#4.0发出文化变革的信号 克里斯蒂拍卖AI艺术品 人工智能如何区分 Facebook在蒙特利尔的新AI实验室 Mozilla想要您的声音 微软使用极深的神经网络赢得ImageNet 建立AI合作伙伴关系 .NET Core 3-Microsoft几乎回到了起点 神经网络-更好的销售商? Google使用AI查找您的住所 虹膜-适用于Android的Siri证明苹果没有优势 TensorFlow 2提供更快的模型训练 深度学习研究人员将为Google工作
您的位置:首页 >程序人生 >

详解vue中使用echarts地图实现上钻下钻的可视化 三级下钻 省>市>县

简述功能概要

最近有需求做一个数据可视化的功能 会具体显示全国各地区的买家分布情况 

鼠标放置在地图上会显示当前城市的分布人数 点击当前省份会下钻到城市地图 会显示当前省市下各个城市的买家数和分布情况

如果遇到没有下一级再次点击会进行返回到国家地图(目前该示例图是两级下钻 省>区市 )(还可以实现点击按钮返回到上一级)

右侧数据表会跟随城市的切换而进行动态切换(无视数据的准确性) 

准备工作

首先需要所有城市地图的json文件和一个城市行政区域划代码的js文件(本文件请求使用)(如有需要可跟与我联系) 

 

获取到当前json和js文件之后需要把json文件放置在服务器中 进行请求回去当前某个城市的json地图文件,亦可放置在static中进行axios请求获取,js文件放置在本地的assets中进行获取

准备好这两项工作后 我们可以开始进行书写代码 生成echarts地图图表

生成地图图表

import cityMap from "../../../assets/map/china-main-city-map.js";import echarts from "echarts";

首先在vue文件中引入echarts和区域代码js文件.

//中国地图(第一级地图)的ID、Name、Json数据var chinaId = 100000;var chinaName = "china";var chinaJson = null;//Echarts地图全局变量,主要是在返回上级地图的方法中会用到var myChart = null;var cityId = null;

定义变量使用

具体实现代码(以及实现步骤)

 <div id="mapChart" class="chart"></div>

 

mapChart(divid) {this.mapData = [];var that = this;//chinaId 为上边定义的变量 值为100000Vue.axios({url:"https://gdsoft-/echart/map/" +chinaId +".json",withCredentials: false,}).then((response) => {//进入页面后 传递的参数为全国的id 然后向json文件发起请求 找到文件名为100000的json文件 //获取到全国的地图文件 渲染出来const mapJson = response.data;//调用数据获取省份数据let data = {from: this.allStartDate,to: this.allEndDate,areaCode: chinaId,};Vue.axios({method: "POST",serviceId: "mall",url: "123456789",data,}).then((res) => {//这里为右侧的table数据展示 //发起请求 获取到全国的省市的json数据this.mapChinaOptions = res.result;for (var i = 0; i < mapJson.features.length; i++) { //mapData为定义的变量获取到当前所以省份地图json文件中的省份名和区域划代码this.mapData.push({name: mapJson.features[i].properties.name,id: mapJson.features[i].id,value: 0,});}//让json地图文件中的区域划代码和请求返回的行政编码作比较 如果相等 // 进获取数据进行赋值this.mapData.forEach((item) => {this.mapChinaOptions.forEach((item1) => {if (item.id == item1.areaCode) {item.value = item1.buyerCount;}});});});//省份的json数据赋值chinaJson = mapJson;//生成图表myChart = echarts.init(document.getElementById(divid));//把上边的数据 都当做参数传递给 函数中this.registerAndsetOption(myChart, chinaName, mapJson);this.mapChartOption.series[0].data = this.mapData;//这里为当点击某个省份或城市的时候的点击事件myChart.on("click", function (param) {that.show = 0;that.mapData2 = [];cityId = cityMap[param.name];// 获取到当前点击的这个城市的 code//如果有这个城市的id 就可以请求json 获取子级地图信息if (cityId) {//代表有下级地图Vue.axios({url:"https://gds/echart/map/" +cityId +".json",withCredentials: false,}).then((response) => {// 获取到城市新的json数据const mapJson = response.data || response;this.getCityData = response.data || response;let data = {from: that.allStartDate,to: that.allEndDate,areaCode: cityId,};Vue.axios({method: "POST",serviceId: "mall",url: "123456789",data,}).then((res) => {if (res.success) {that.mapData2 = [];this.mapCityOptions = res.result;that.payDataList = res.result;//重新获取相同的数据 给 that.mapData2赋值for (var i = 0; i < this.getCityData.features.length; i++) {that.mapData2.push({name: this.getCityData.features[i].properties.name,id: this.getCityData.features[i].id,value: 0,});}that.mapData2.forEach((item) => {this.mapCityOptions.forEach((item1) => {if (item.id == item1.areaCode) {item.value = item1.buyerCount;}});});//重新调用 生成新的地图that.registerAndsetOption(myChart, param.name, mapJson);//把数据传递给图表datathat.mapChartOption.series[0].data = that.mapData2;} else {Message.error("获取买家地域分布数据失败,请稍后重试!");}}).catch((err) => {Message.error("获取买家地域分布数据失败,请稍后重试!");});});} else {that.show = 1;// 如果没有就在最后一级 再次点击返回中国地图//把上边的数据 都当做参数传递给 函数中that.registerAndsetOption(myChart, chinaName, mapJson);//返回中国地图 并且把数据重新赋值 给data 防止返回的时候 data数据为空了that.mapChartOption.series[0].data = that.mapData;}});});},registerAndsetOption(myChart, name, mapJson) {//把获取到的城市name和 城市地图json 用来注册地图echarts.registerMap(name, mapJson);//图表的配置文件this.mapChartOption = {//鼠标放置在地图上的显示tooltip: {trigger: "item",formatter: (p) => {//这里p可以获取到所有的数据let val = p.value;if (window.isNaN(val)) {val = 0;}let txtCon ="<div style="text-align:center">" +p.name +":<br />地域分布数:" +val +"</div>";return txtCon;},},series: [{type: "map",map: name,itemStyle: {normal: {//未选中样式//背景颜色areaColor: "#e8effd",//边框颜色borderColor: "#fbfdfe",//边框宽度borderWidth: 1,},emphasis: {// 选中样式borderWidth: 1,//高亮颜色areaColor: "#2062e6",label: {//显示文字show: false,textStyle: {//鼠标移入的字体颜色color: "black",},},},},data: [],},],};myChart.setOption(this.mapChartOption, true);},
图表宽度自适应mounted() {this.mapChart("mapChart");// 自适应window.onresize = () => {myChart.resize();};},
// 监听图表数据的变化watch: {mapChartOption: {handler(newVal, oldVal) {if (myChart) {// 如何有变化 就获取最新的数据 并且渲染myChart.setOption(newVal);} else {// 如何无变化 还是老数据myChart.setOption(oldVal);}},deep: true,},},

具体的实现步骤可以看代码有步骤的具体实现和业务代码

 

简述具体思路

当前有一个本地的行政区域划代码的js文件  和 一个地图城市信息的json文件

初始化的时候会获取全国的区域代码 然后和 json文件中的区域代码匹配 然后请求匹配的json文件

会获取到全国的地图信息 通过 echarts渲染出来

当点击具体省份的时候 会获取当前省份的 区域代码 和 json文件的区域代码匹配 然后请求匹配的json文件

会获取到省市的地图信息 通过 echarts渲染出来

三级下钻同理

如果点击没有下一级城市 会重新获取全国的地图文件 相当于返回 

具体有问题可以与我联系 新人一个 勿喷

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。