echarts+vue中国地图,点击进入省级地图

先上效果图

再说思路
第一步： 生成中国地图
第二步： 定义点击事件根据反参生成省级地图所需要的参数
第三步： 将省级地图所需要的参数传入渲染方法重新渲染

最后说步骤

准备 1 npm echarts 2下载各省地图json 传送门

// 引用初始化所需的中国地图
import echarts from "echarts";
import china from 'echarts/map/json/china.json'
import axios from 'axios'
echarts.registerMap('china', china)

定义生成参数option方法

getMapOpt(place) {let option = option = {backgroundColor: '#404a59',title: {text: "mapDemo",subtext: "data from map",left: "center"},geo: {map: place?place:'china',label: {emphasis: {show: false}},roam: true,itemStyle: {normal: {areaColor: '#323c48',borderColor: '#111'},emphasis: {areaColor: '#2a333d'}}},}return option},

定义渲染生成中国地图和各省地图的方法

  //显示中国地图showChinaMap(){let option = this.getMapOpt()this.map.setOption(option, true);},//显示各省地图getProvinceMapOpt(provinceAlphabet){axios.get('static/province/'+provinceAlphabet+'.json').then((s)=>{echarts.registerMap(provinceAlphabet, s.data)let option = this.getMapOpt(provinceAlphabet)this.map.setOption(option, true);})},

初始化方法，生成中国地图及定义点击事件

  initMap() {var dom = document.getElementById("left_map");this.map = echarts.init(dom);let option = this.getMapOpt()if (option && typeof option === "object") {this.map.setOption(option, true);}this.map.on('click', (param)=> {event.stopPropagation()// 阻止冒泡// 找到省份名let provinceIndex = provincesText.findIndex(x=>{return param.name ===x})if(provinceIndex===-1)returnlet provinceAlphabet = provinces[provinceIndex]// 重新渲染各省份地图this.getProvinceMapOpt(provinceAlphabet)})}

整份代码

<template><div class="content row-flex-start" style="min-width:1500px;ovorflow-x:auto"><div class="left_map" id="left_map"  @click="showChinaMap"></div><div class="right_opetate row-center" id="right_opetate"></div></div>
</template><script>
import echarts from "echarts";
import china from 'echarts/map/json/china.json'
import axios from 'axios'
echarts.registerMap('china', china)var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'];var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];
export default {created() {this.cityOpt = cityName;},mounted() {this.$nextTick(() => {this.initMap();});},data() {return {map :{},cityOpt: [],mapForm: {},mapData: [{ name: "海门", value: 100 }],mapOpt: []};},props: {},methods: {getMapOpt(place) {let option = option = {backgroundColor: '#404a59',title: {text: "mapDemo",subtext: "data from map",left: "center"},geo: {map: place?place:'china',label: {emphasis: {show: false}},roam: true,itemStyle: {normal: {areaColor: '#323c48',borderColor: '#111'},emphasis: {areaColor: '#2a333d'}}},}return option},//显示中国地图showChinaMap(){let option = this.getMapOpt()this.map.setOption(option, true);},//显示各省地图getProvinceMapOpt(provinceAlphabet){axios.get('static/province/'+provinceAlphabet+'.json').then((s)=>{echarts.registerMap(provinceAlphabet, s.data)let option = this.getMapOpt(provinceAlphabet)this.map.setOption(option, true);})},initMap() {var dom = document.getElementById("left_map");this.map = echarts.init(dom);let option = this.getMapOpt()if (option && typeof option === "object") {this.map.setOption(option, true);}this.map.on('click', (param)=> {event.stopPropagation()// 阻止冒泡// 找到省份名let provinceIndex = provincesText.findIndex(x=>{return param.name ===x})if(provinceIndex===-1)returnlet provinceAlphabet = provinces[provinceIndex]// 重新渲染各省份地图this.getProvinceMapOpt(provinceAlphabet)})}},computed: {}
};
</script><style>
.left_map {width: 1200px;height: 100%;
}
.right_opetate {flex: 1;height: 100%;background: #404a59
}
.map_form {}
</style>

echarts+vue中国地图,点击进入省级地图相关推荐

echarts的中国地图，点击进入省级地图，按需加载对应的省js，可返回中国地图
这是我项目中用到的示例图: 原理:创建两个省份的数组,在点击某个省份的时候,遍历获取对应省份的数据js,并加载此数据js,同时重新初始化echarts渲染此省份的数据效果 1.省份数组,用于遍历获取对 ...
echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图
先上效果图, 鼠标放上去时的效果,如下图所示: 点击进入到的省级地图,如下图所示: 中国地图,鼠标放上去时的代码: myChart.on('mouseover', function (params) ...
vue实现世界疫情地图(点击进入子地图)
vue实现世界疫情地图,点击可以进入子地图效果展示寻找数据源设置代理发送请求提取数据提取数据踩坑处理数据并绘图国内疫情地图数据处理绘制海外疫情地图数据处理绘制完整代码代码优化点 ...
vue - vue使用echarts实现中国地图和点击省份进行查看
文章目录 1,实现的效果和功能 2,安装ECharts 3,main.js里面引入echarts 4,实现如下 5,遇到的问题 6,用到的模拟数据 1,实现的效果和功能 vue使用echarts实现中 ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
vue+echarts实现中国地图省市区下钻以及添加标注
最近项目中有需要地图下钻和添加标注的需求,就先做了一个demo,在博客上查了一些资料,结合实际情况,发现除了一些状况,发篇文章,采集一下各位大佬的意见. 效果呈现目前还没有问题,下面是省内地图,然后 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
Vue + Echarts 实现中国地图多级钻取功能
传送门:本文完整代码地址如果觉得有帮助,别忘了点亮 star 哦说明: 本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能(基本版未做过多功能拓展和样式优化便于二次开 ...
echarts全国地图点击弹窗（Vue）
前言 echarts使用很多次了,可以配置地图还是第一次,要实现的是地图上标注两个点,点击点弹出弹窗,点击可以跳转,效果如下: Echarts官网配置项参考 Echarts官网的一参考demo 贴关键 ...

echarts+vue中国地图,点击进入省级地图

echarts+vue中国地图,点击进入省级地图相关推荐

最新文章

热门文章