vue2 使用echarts实现地图点击进入下一层级+点击空白处回退功能

目录

• 先验知识：
• 运行效果（只做了河南的点击和后退）：
• 实现思路：
• 全部代码如下：

先验知识：

vue2中echarts的安装和显示中国地图：https://www.本网站.net/javascript/321196ahi.htm

鼠标事件： https://echarts.apache.org/zh/api.html#echartsInstance.on

echarts.getMap()：https://echarts.apache.org/zh/api.html#echarts.getMap

监听“空白处”的事件：https://echarts.apache.org/handbook/zh/concepts/event/#%E7%9B%91%E5%90%AC%E2%80%9C%E7%A9%BA%E7%99%BD%E5%A4%84%E2%80%9D%E7%9A%84%E4%BA%8B%E4%BB%B6

npm 安装 echarts4.9（全局引入不支持5.0）

运行效果（只做了河南的点击和后退）：

实现思路：

1. 引入地图并显示

// 1. 基于准备好的dom，初始化echarts实例 this.myChart = this.$echarts.init(this.$refs.myChart); // 2. 引入要显示的地图 json 文件（json文件可以是echart自带的，也可以是自己下载的） this.mapJson = require("echarts/map/json/china.json"); // 3. 注册可用的地图 registerMap("自定义的名字，要和option中map:''对应",注册的地图指向的json文件) this.$echarts.registerMap("mapJson", this.mapJson); // 4. 指定图表的配置项和数据 this.option = { geo: { type: "map", map: "mapJson",//这里的数据会变，"这里是引入的存储json文件的变量名" label: { normal: { color: "#000000", show: true, //显示省份名称 }, }, }, series: [ { name: "在地图中显示散点图", type: "scatter", coordinateSystem: "geo", //设置坐标系为 geo data: [ //这里放标注点的坐标[{name: "北京",value: [116.46, 39.92]}] ], }, ], }; // 5. 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。 this.myChart.setOption(this.option);

2. 地图显示的是“中国”还是“省”还是“市区”主要就是靠引入的json文件区分，
也就是  this.mapJson = require("echarts/map/json/china.json"); 的mapJson，
然后   this.$echarts.registerMap("mapJson", this.mapJson); 注册一下修改后的文件，
this.myChart.setOption(this.option); 地图即可重新显示新的地区。

3. 怎么确定  this.mapJson  引入的哪个文件呢？ 添加地图的监听事件后，可以获取一个code值，用这个code值判断应该引入哪个省市的文件。点击空白处回退同理，只需要确定应该回退层级的code值，就可以由此判断应该回退到哪个层级页面了。

全部代码如下：

<template> <div id="app"> <div id="myChart" ref="myChart"></div> <el-button type="success" @click="cancelEchartsEvent">点击取消on事件</el-button> </div> </template> <script> export default { data() { return { myChart: null, mapJson: null, option: {}, curArea: { code: -1, name: "" }, }; }, mounted() { this.initEchartParams(); this.addMouseClick();//开启 echarts 事件监听 }, beforeDestroy() { this.cancelEchartsEvent(); }, methods: { cancelEchartsEvent() { console.log("页面卸载前，取消 echarts 的事件监听"); this.myChart.off("click"); }, initEchartParams() { // 1. 基于准备好的dom，初始化echarts实例 this.myChart = this.$echarts.init(this.$refs.myChart); // 2. 引入要显示的地图 json 文件（json文件可以是echart自带的，也可以是自己下载的） this.mapJson = require("echarts/map/json/china.json"); // 3. 注册可用的地图 registerMap("自定义的名字，要和option中map:''对应",注册的地图指向的json文件) this.$echarts.registerMap("mapJson", this.mapJson); // 4. 指定图表的配置项和数据 this.option = { geo: { type: "map", map: "mapJson",//这里的数据会变，"这里是引入的存储json文件的变量名" label: { normal: { color: "#000000", show: true, //显示省份名称 }, }, }, series: [ { name: "在地图中显示散点图", type: "scatter", coordinateSystem: "geo", //设置坐标系为 geo data: [ //这里放标注点的坐标[{name: "北京",value: [116.46, 39.92]}] { name: "郑州", value: [113., 34.] }, { name: "北京", value: [116.41995, 40.18994] }, { name: "天津", value: [117., 39.034933] }, { name: "昆明", value: [102.81844, 24.] }, { name: "广州", value: [113.26453, 23.] }, ], }, ], }; // 5. 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。 this.myChart.setOption(this.option); }, addMouseClick() { this.addClickInMap(); this.addClickInBlank(); }, // 点击了地图非空白处 addClickInMap() { // echarts.getMap 获取已注册的地图 const maps = this.$echarts.getMap("mapJson").geoJson.features; console.log({ maps }); this.myChart.on("click", (res) => { let clickArea = maps.find(map => map.properties.name == res.name); // console.log({ clickArea }); if (!clickArea) { // 如果点的不是地图，而是地图上的散点，什么也不做 return; } this.curArea.code = clickArea.id; this.curArea.name = res.name; console.log("当前点击的是: " + this.curArea.name + " this.curArea.code：" + this.curArea.code); // 修改 mapJson 的数值 this.configGeoMap(this.curArea.code); }); }, // 点击了地图空白处 addClickInBlank() { this.myChart.getZr().on('click', (event) => { // !event.target 不存在 证明点击的地方是地图空白处 if (!event.target) { let preCode = -1; const curAreaCode = this.curArea.code; console.log("回退前地区code ", curAreaCode); if (curAreaCode == "") {//当前在中国，不回退 console.log("当前地图已经是 china， 不可回退！"); return; } else if (curAreaCode % 10000 == 0) {//说明当前在省，回退到 china preCode = ; } else if (curAreaCode % 100 == 0) {////说明当前在 郑州市，回退到 河南省 preCode = curAreaCode - curAreaCode % 10000; } else { preCode = curAreaCode - curAreaCode % 100; //回退到city } // 回退后，当前显示地图的code就是preCode this.curArea.code = preCode; console.log('点击了空白处，回退后地区 code:' + preCode); this.configGeoMap(preCode); } }); }, // 修改 mapJson 的数值 configGeoMap(code) { // 这里要根据code值找到对应的json文件，如果是从服务器获取，也是找到对应的json文件即可 // 这里我用的是 用npm安装echarts@4.9.0 时自动下载的文件 if (code == "") { this.mapJson = require("echarts/map/json/china.json"); } else if (code == "") { this.mapJson = require("echarts/map/json/province/henan.json"); } else { console.log('除了河南外，其它地区暂时不能跳转'); } this.$echarts.registerMap("mapJson", this.mapJson); this.myChart.setOption(this.option); } } } </script> <style scoped> #myChart { width: 100%; height: 500px; background-color: #f1f3f4; } button { margin: 20px; } </style>

到此这篇关于vue2 使用echarts实现地图点击进入下一层级+点击空白处回退功能的文章就介绍到这了,更多相关vue2 echarts地图点击进入下一层级内容请搜索本网站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本网站！

您可能感兴趣的文章:

• vue2 使用echarts实现地图点击进入下一层级+点击空白处回退功能
• vue2结合echarts实现一个地图的效果
• vue2项目中封装echarts地图的优雅方法
• 使用Vue3和Echarts 5绘制带有立体感流线中国地图(推荐收藏!)
• vue使用echarts实现地图的方法详解
• vue 使用 echarts 绘制中国地图的实现代码
• Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示