echarts地图下钻（vue）

效果

<template><div><h3>地图下钻</h3><button class="button" @click="back()" v-show="backVisible">返回上级</button><div ref="mapChart" style="width:100%;height:500px;"></div></div>
</template><script>
import cityMap from "../lib/cityMap.js";
import echarts from "echarts";
import axios from "axios";
//Echarts地图全局变量，主要是在返回上级地图的方法中会用到
export default {name: "industryAnalysis",data(){return{mapChart:Object,backVisible:false//返回按钮是否可见}},methods: {/*** 返回烟台市地图*/back() {axios.get("./static/json/map/yanTaiShi.json", {}).then(response => {const mapJson = response.data;this.registerAndsetOption(this.mapChart,"yanTaiShi","烟台市",mapJson,true);});},/*** 初始化烟台地图，市区绑定点击事件*/initMapChart() {axios.get("./static/json/map/yanTaiShi.json", {}).then(response => {const mapJson = response.data;this.mapChart = echarts.init(this.$refs["mapChart"]);this.backVisible = false;this.registerAndsetOption(this.mapChart, "yanTaiShi", "烟台市", mapJson, true);});},/*** @param {*} myChart* @param {*} id        市县Id* @param {*} name      市县名称* @param {*} mapJson   地图Json数据* @param {*} flag      是否增加点击事件*/registerAndsetOption(myChart, id, name, mapJson, flag) {echarts.registerMap(name, mapJson);let option = {series: [{type: "map",map: name,label: {show: true,textStyle:{color:'#fff'}},itemStyle: {normal: {areaColor: "#1e5186",borderColor: "#19283a",borderWidth: 1}},data: this.initMapData(mapJson)}]}myChart.setOption(option);if(!flag){myChart.off('click');this.backVisible = true;}else{// 增加点击事件this.backVisible = false;let _this = this;myChart.on("click", function(param) {console.log(param.name);var cityId = cityMap[param.name];if (cityId) {//代表有下级地图axios.get("./static/json/map/" + cityId + ".json", {}).then(response => {const mapJson = response.data;_this.registerAndsetOption(myChart,cityId,param.name,mapJson,false);});} else {//没有下级地图，回到烟台地图this.registerAndsetOption(myChart, "yanTaiShi", "烟台市", mapJson, true);}});}},initMapData(mapJson) {var mapData = [];for (var i = 0; i < mapJson.features.length; i++) {mapData.push({name: mapJson.features[i].properties.name//id:mapJson.features[i].id});}return mapData;}},mounted: function() {this.initMapChart();}
};
</script>

cityMap.js
城市与地图json名称对应对象
烟台市（城市名称）yanTaiShi (地图json文件名称)

const cityMap = {"烟台市": "yanTaiShi","长岛县": "changDaoXian","莱州市": "laiZhouShi","芝罘区": "zhiFuQv","海阳市": "haiYangShi","龙口市": "longKouShi","莱阳市": "laiYangShi","蓬莱市": "pengLaiShi","招远市": "zhaoYuanShi","福山区": "fuShanQv","莱山区": "laiShanQv","栖霞市": "qiXiaShi","牟平区": "muPingQv",}export default cityMap

地图选择器
http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
实时geoJson
https://hxkj.vip/demo/echartsMap/

echarts地图下钻（vue）相关推荐

echarts 地图下钻功能
vue 实现 echarts 地图下钻安装效果图 echarts 安装 npm install echarts // 引入echarts 中国地图 import echarts from 'ech ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
echarts 地图下钻到市到区
echarts的地图展示,并且带有下钻到下级市区 vue.js里面操作echarts //vue里面修改模板 <template><div id="china_map_bo ...
echarts地图下钻与回钻
最近在项目实际业务中为了更清晰的展示各省市的数据,使用echarts实现了地图的下钻和回钻.里面加了实际业务,所以代码有些冗余. import * as echarts from 'echarts' ...
echarts地图下钻打点案例
<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"& ...
echarts地图下钻
最近做的项目用到了echarts的地图,默认为市区地图,需要实现从市区下钻到县级,首先我用的是echarts3.0实现的地图钻取功能. 要实现的效果为图(市区可切换,点市区还可以钻取) 1.第一步去e ...
echarts地图下钻效果
先看效果图,第二张是因为数据差距过大导致.可调再看代码 import * as echarts from 'echarts'; import mapJson from '../utils/福州市.j ...
Echarts地图下钻，省钻到市，市钻到县，县钻到乡
由于经费问题,只写了省钻到市,市钻到县与县钻到乡在本文中根本没有出现. 先贴两张图,第1张是全国地图: 第2张是点击河北后的河北省地图: 步骤详解: 1. 引入js const echarts = r ...
【echarts】vue引用 echarts 地图
1.在vue项目中安装echarts npm i echarts -S 或 cnpm i echarts -S 2.在用到echarts地图的vue单页面中引入: import echarts fro ...

echarts地图下钻（vue）

echarts地图下钻（vue）相关推荐

最新文章

热门文章