vue3.0中echarts实现中图地图的省份切换，并解决多次切换后地图卡死的情况

一、echarts安装及地图的准备

1、安装echarts

npm install echarts

2、下载china.js等json文件到项目中的文件夹
map的下载链接：https://pan.baidu.com/s/1rsYANBr3znUUhQLcUmeTIQ
提取码：kscz

二、代码说明

<template><div class="center-body"><div class="map" id="map"></div><div class="res-button"><button v-if="showButton" @click="reChinaMap()">返回全国</button></div></div>
</template><script > import * as echarts from "echarts";export default {name: 'index',data() {return {myChart:null,// 省份 province: {"北京": "beijing","天津": "tianjin","上海": "shanghai","重庆": "chongqing","河北": "hebei","河南": "henan","云南": "yunnan","辽宁": "liaoning","黑龙江": "heilongjiang","湖南": "hunan","安徽": "anhui","山东": "shandong","新疆": "xinjiang","江苏": "jiangsu","浙江": "zhejiang","江西": "jiangxi","湖北": "hubei","广西": "guangxi","甘肃": "gansu","山西": "shanxi","内蒙古": "neimenggu","陕西": "shanxi1","吉林": "jilin","福建": "fujian","贵州": "guizhou","广东": "guangdong","青海": "qinghai","西藏": "xizang","四川": "sichuang","宁夏": "ningxia","海南": "hainan","台湾": "taiwan","香港": "xianggang","澳门": "aomen"},}},methods:{drawMap(name, json) {// 前两部是解决切换卡死的关键// 判断地图是否渲染let myChart = echarts.getInstanceByDom(document.getElementById("map"))// 如果渲染则清空地图 if (myChart != null) {myChart.dispose()}// 初始化地图myChart = echarts.init(document.getElementById("map"));               let size = '95%'if (!json) {json = require("@/assets/js/map/china.json");this.showButton = falsesize = '105%'}echarts.registerMap(name, json)let layoutSize = sizelet option={legend: {left: '20',bottom:'30',orient:'vertical',textStyle: {color: '#c1cadf',fontSize: 20},},geo: {map: name,aspectScale: 0.85,layoutCenter: ["50%", "50%"], //地图位置layoutSize: layoutSize,                    // 新版写法 normalitemStyle: {shadowColor: "#276fce",shadowOffsetX:0,shadowOffsetY:15,opacity:0.5                        },                  // 新版写法 emphasisemphasis: {itemStyle: {areaColor: "#276fce",}},regions:[{name:'南海诸岛',itemStyle:{areaColor: 'rgba(0,10,52,1)',borderColor: 'rgba(0,10,52,1)',color:"#009cc9"},label:{show:false,color:'#ffffff',fontSize:12,}}]},series: [// 地图{name: '地图',type: "map",map: name,aspectScale: 0.85,layoutCenter: ["50%", "50%"], //地图位置layoutSize: layoutSize,zoom: 1,scaleLimit: {min: 1,max: 2,},label:{show:true,color: "#ffff",},               // 新版写法 normalitemStyle: {areaColor: "#0c274b",borderColor: "#1cccff",borderWidth: 1.5,},// 新版写法 emphasisemphasis: {itemStyle: {areaColor: "#02102b",label: {color: "#fff"}}},selectedMode: false,},],}myChart.setOption(option,true);myChart.on('click', e => {if (e.seriesName === "地图") {// this.darwProvniceMap(e)} }window.addEventListener("resize", () => {myChart.resize()})this.myChart = myChart},// 切换省份darwProvniceMap(val) {if(this.province[val.name]) {let json = require(`@/assets/js/map/province/${this.province[val.name]}.json`)this.drawMap(this.province[val.name],json)this.showButton = true}},// 返回全国reChinaMap() {this.drawMap('china')},}
</script><style scoped>/*提示框容器*/.res-button{position: fixed;top: calc(70px);left: calc(22%+10px);;z-index: 999;border-radius: 6px;}
</style>

三、运行效果

本人的经验分享，希望可以帮助到你们,如何不对的地方，可以评论留言，帮我指正一下，如果帮助了你，请给我点个赞吧

vue3.0中echarts实现中图地图的省份切换，并解决多次切换后地图卡死的情况相关推荐

Vue3.0如何在setup中获取定义的全局方法
有些情况下我们需要定义全局方法然而在vue3.0中我们定义全局方法需要在globalProperties上面定义大部分情况下还是可以定义在main.js中的我们这里就以定义在main.js中为例 ...
vue3.0使用echarts完成中国地图以及各省份地图
在做数据页面的时候,很多时候需要地图来标注数据,但是怎样使用地图呢? 1,先安装echarts包 yarn add echarts 2,在main.js中引入 import echarts from ...
vue3.0“ Uncaught TypeError: Cannot read property ‘use‘ of undefined”报错解决......
vue配置路由时,在路由文件中使用Vue.use(router)的语句无法正常启动服务,并且浏览器报错,提示'use'并未定义:vue中没有use()这个方法加载vue-router是vue2使用的 ...
JavaScript高德地图中绘制echarts图表随地图移动
JavaScript高德地图中绘制echarts图表随地图移动** 先上效果图实现方法如下: 使用高德地图"信息窗体",信息窗体AMap.InfoWindow的属性content ...
探秘 Vue3.0 - Composition API 在真实业务中的尝鲜姿势
前言 2019年2月6号,React 发布 16.8.0 版本,新增 Hooks 特性.随即,Vue 在 2019 的各大 JSConf 中也宣告了 Vue3.0 最重要的 RFC,即 Functio ...
vue3.0(包含中文官方文档)
vue3.0 官方文档一.工程创建 1.安装node 2. 安装vue3.0 方式一:npm i -g @vue/cli 方式二:cnpm install -g @vue/cli 这个需要安装淘宝镜 ...
echarts折线面积图
前言近段时间又做了些相关图表,更熟悉了对echarts学习,针对折线图进行一个书写需求图实现技术 vue3.0+ts+echarts 代码 <template><divsty ...
简明扼要聊聊 Vue3.0 的 Composition API 是啥东东！
对于没太了解 Vue3.0 的同学,在看到 Composition API 时,除了看起来会有一个"高大上"的感觉,可能更多的是有点懵逼,心中不免泛起一堆疑惑,这到底是何方神圣?干 ...
pb调用键盘钩子的例子_搞不动Vue3.0的源码，先做个API调用师也行（新人踩坑初试）...
作为一个刚刚入行工作不久的前端菜鸟,Vue2.x都没整熟练.但看着身边人都在学习Vue3,我也不敢怠慢,毕竟Vue3正式版已经发布两个月了,我还是耐着性子好好的阅读了一下Vue3.0的文档.没有其他大 ...

vue3.0中echarts实现中图地图的省份切换，并解决多次切换后地图卡死的情况

一、echarts安装及地图的准备

二、代码说明

三、运行效果

vue3.0中echarts实现中图地图的省份切换，并解决多次切换后地图卡死的情况相关推荐

最新文章

热门文章