vue+echarts中国地图+省市级地图（全程教学，你也可以）

2024-07-11 20:56| 来源: 网络整理| 查看: 265

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

VUE+Echarts+省市地图钻取(简洁版，超详细)

以上两篇来自站内，是本文的主要参考来源。首先需要引入 echarts 包

1npm install echarts --save

安装echarts包后在项目中node_modules文件夹中找到，如果使用vscode，点击node_modules文件夹后直接键入“echarts”即可找到。此文件夹下map/json/province文件下的json文件即包含所有省市信息。将province文件夹复制，放入项目的public文件夹中，便于后续懒加载省市地图信息。在项目中建立一个vue文件，将以下内容复制进去。代码中注释部分表示可修改位置，请注意

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 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 () { }, mounted () { this.$nextTick(() => { this.initMap() }) }, data () { return { map: {} } }, props: {}, methods: { getMapOpt (place) { const option = { backgroundColor: '#F3F3F3', //地图背景颜色 //以下是地图标题，我在此处设空，需要的可以自己加上 title: { text: '', subtext: '', left: 'center' }, //以下是地图右侧“还原”“下载”工具框 toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { restore: {}, saveAsImage: {} } }, geo: { map: place || 'china', label: { emphasis: { show: false }, // 不需要显示地名可直接删除normal此项 normal: { show: true, // 是否显示对应地名 textStyle: { color: 'rgba(0,0,0)' } } }, roam: true, itemStyle: { normal: { areaColor: '#6FA7CE', //地图颜色 borderColor: '#fff' //地图边线颜色 }, emphasis: { areaColor: '#B7DFED' //鼠标移入颜色 } } } } return option }, // 显示中国地图 showChinaMap () { const option = this.getMapOpt() this.map.setOption(option, true) }, // 显示各省地图，这里使用axios请求本地文件，provice文件夹存在的位置为public/province（旧版本是static） getProvinceMapOpt (provinceAlphabet) { axios.get('province/' + provinceAlphabet + '.json').then((s) => { echarts.registerMap(provinceAlphabet, s.data) const option = this.getMapOpt(provinceAlphabet) this.map.setOption(option, true) }) }, initMap () { var dom = document.getElementById('left_map') this.map = echarts.init(dom) const option = this.getMapOpt() if (option && typeof option === 'object') { this.map.setOption(option, true) } this.map.on('click', (param) => { // console.log(param) event.stopPropagation()// 阻止冒泡 // 找到省份名 const provinceIndex = provincesText.findIndex(x => { return param.name === x }) //在这里判断provincesText中是否包含点击的省份名，有则渲染省级地图，无则无处理 if (provinceIndex === -1) return const provinceAlphabet = provinces[provinceIndex] // 重新渲染各省份地图 this.getProvinceMapOpt(provinceAlphabet) }) } }, computed: {} } .left_map { width: 1200px; //此处设置地图大小 height: 100%; //注意，如果父组件没有设置高度，此处可设置为px单位的高度，否则塌陷 } .right_opetate { flex: 1; height: 100%; background: #404a59 }

在另一个组件中引用地图组件时，先将地图组件引入，我是放在同文件夹下的子文件夹，所以为import 组件名 from ‘./文件夹名/文件名’。请根据自己需要修改。

1import EchartsMap from './modules/echartsMap'

然后注册组件

123components: { EchartsMap },

最后使用

以上即是使用echarts加vue画出地图的全过程。结果图后续会加上。

【本文地址】

公司简介

联系我们