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

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

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

以上两篇来自站内，是本文的主要参考来源。
首先上才艺

首先需要引入 echarts 包

npm install echarts --save

安装echarts包后在项目中node_modules文件夹中找到，如果使用vscode，点击node_modules文件夹后直接键入“echarts”即可找到。
此文件夹下map/json/province文件下的json文件即包含所有省市信息。将province文件夹复制，放入项目的public文件夹中，便于后续懒加载省市地图信息。

在项目中建立一个vue文件，将以下内容复制进去。代码中注释部分表示可修改位置，请注意

<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 () {},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) returnconst provinceAlphabet = provinces[provinceIndex]// 重新渲染各省份地图this.getProvinceMapOpt(provinceAlphabet)})}},computed: {}
}
</script><style>
.left_map {width: 1200px; //此处设置地图大小height: 100%; //注意，如果父组件没有设置高度，此处可设置为px单位的高度，否则塌陷
}
.right_opetate {flex: 1;height: 100%;background: #404a59
}
</style>

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

import EchartsMap from './modules/echartsMap'

然后注册组件

components: {EchartsMap},

最后使用

<EchartsMap/>

以上即是使用echarts加vue画出地图的全过程。
现在拖动后会返回中国地图，暂时先这样吧。

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

vue+echarts实现江苏省疫情地图
vue+echarts实现江苏省疫情地图文章目录 vue+echarts实现江苏省疫情地图前言一.使用步骤 1.引入库 2.代码数据效果前言作为刚学习vue结合echarts写的案例,当前 ...
前端jq/vue echarts中国地图的实现
一.jquery项目实现echarts中国地图 1.引入相关资源文件 jquery.echarts 等 <script src="https://cdn.bootcdn.net/aja ...
echarts中国旅客迁徙地图
功能 1.省份根据数据显示不同的颜色. 2.点击省份可以切换地级市. 3.增加迁徙动态图. Springboot + thymeleaf + Vue + Echarts Echarts学习网站 1.想 ...
VUE echarts绘制省级/市级地图自动轮循tooltip
效果图绘制省级地图 1.安装echarts依赖,并在main.js中准备 import echarts from "echarts" Vue.prototype.$echarts ...
vue echarts 中国地图实现用户分布
效果如图所示 vue中echarts@4.9版本,地图的使用, 避免进坑,亲测4.9版本正常,5.0版本不支持因为官方移除了地图数据和map文件夹china.js 1.安装echarts@4.9版本 ...
vue echarts 中国地图省级联动+散点图（各省json文件及china.js）
最近用echarts 做个散点图,且省级联动,效果图如下: 1.安装echarts cnpm install echarts --save 2.引入echarts.中国地图及省份地图json impo ...
vue+echarts中国地图数据可视化展示
1.效果展示 2.步骤: 2.1.在main.js文件中加入 //引入echartsimport * as echarts from "echarts";Vue.prototype ...
使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
vue 引入json地图_使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件...
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...

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

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

最新文章

热门文章