vue中引入Ecahrts地图

先来张效果图：

1、首先我们需要先去网上找一份按地域行政编码命名的JSON文件，你想实现哪个城市的地图就找对应城市的JSON文件，可以任意从下面两个平台下载：
① DataV.GeoAtlas地理小工具系列

② echarts-map最新实时geoJson文件下载_hxkj.vip_HashTang

注意：第②方式下载的文件后缀是.geoJson，需要重命名改为.json即可。

2、接下来就是引入Echarts使用
① npm引入echarts

npm install echarts --save

② 在 main.js 中添加下面两行代码，全局引入echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

注：import echarts from ‘echarts’ 引入echarts后，不能全局使用echarts，所以通过Vue.prototype将echarts保存为全局变量

③ 1>先来一份简单的使用（没有动态请求地图data数据），新建一个Vue文件
要点：div盒子容器，给它固定宽

<template>
	<div class="mapInfo">
		<div class="top">
			<span class="title">养殖场数量分布情况</span>
			<div class="echartInfo" id="echartInfo" style="width:500px;height:450px"></div>
			
			<!-- 这是采用ref，如果是这种，下方调用的话就可以使用this.$refs.echartInfo
			<div class="echartInfo" ref="echartInfo" style="width:500px;height:450px"></div>
			 -->
			 
		</div>
	</div>
</template>
<script>
	import zhanjiangMP from "@/static/js/城市.json"//引入路径看自己所存JSON位置
	export default {
		data() {
			return {
				option: {
					title: {
						text: '',
						subtext: '',
						sublink: ''
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}<br/>{c}'
					},
					visualMap: {
						min: 800,
						max: 50000,
						text: ['High', 'Low'],
						realtime: false,
						calculable: true,
						inRange: {
							color: ['lightskyblue', 'yellow', 'orangered'],
						},
					},
					series: [{
						name: '',
						type: 'map',
						map: 'zhanjiang',
						label: {
							show: false
						},
						data: [
							{
								name: '廉江市',
								value: 15477
							},
							{
								name: '遂溪县',
								value: 15477
							},
							{
								name: '吴川市',
								value: 31686
							},
							{
								name: '坡头区',
								value: 6992
							},
							{
								name: '赤坎区',
								value: 44045
							},
							{
								name: '霞山区',
								value: 40689
							},
							{
								name: '麻章区',
								value: 37659
							},
							{
								name: '雷州市',
								value: 45180
							},
							{
								name: '徐闻县',
								value: 55204
							}
						]
					}]
				},
			}
		},
		mounted() {
			this.initEchartInfo();//执行initEchartInfo方法
		},
		methods: {
			initEchartInfo() {
				//let echarts = require('echarts');//若有在main.js全局引入就不需要这一行
				echarts.init(document.getElementById("echartInfo")).dispose();//销毁，这一步是考虑到有时候会动态改变地图data数据，先销毁再初始化
				let myChart = echarts.init(document.getElementById("echartInfo"));//初始化
				//let myChart = echarts.init(this.$refs.echartInfo);//初始化(ref)
				echarts.registerMap('zhanjiang', zhanjiangMP);//这一步是引用JSON文件，第一个参数需要和上面series.map的名称对应
				myChart.setOption(this.option);//此处option对象是写在全局data里面，也可以直接写在initEchartInfo()方法里面，如let option = {}。看自己所需
			},
		},
	}
</script>
<style lang="scss" scoped>
	
</style>

关于option里面的属性，大家可以直接在echarts官网上找配置手册
option属性配置手册

2>刚才那一份写法是没有动态改变option.series[0].data里面的数据的，现在来一份动态改变data的写法。

要点：myChart.setOption(this.option);这一行代码的调用顺序很重要，事关你动态改变的数据能不能响应，即这一行需要在axios请求数据后调用，地图上面的数据才会动态响应。

<template>
	<div class="mapInfo">
		<div class="top">
			<span class="title">养殖场数量分布情况</span>
			<div class="echartInfo" id="echartInfo" style="width:500px;height:450px"></div>
			
			<!-- 这是采用ref，如果是这种，下方调用的话就可以使用this.$refs.echartInfo
			<div class="echartInfo" ref="echartInfo" style="width:500px;height:450px"></div>
			 -->
			 
		</div>
	</div>
</template>
<script>
	import zhanjiangMP from "@/static/js/城市.json"//引入路径看自己所存JSON位置
	export default {
		data() {
			return {
				myChart:null,//全局变量，方便myChart.setOption(this.option)在其他Axios请求函数调用
				option: {
					title: {
						text: '',
						subtext: '',
						sublink: ''
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}<br/>{c}'
					},
					visualMap: {
						min: 800,
						max: 50000,
						text: ['High', 'Low'],
						realtime: false,
						calculable: true,
						inRange: {
							color: ['lightskyblue', 'yellow', 'orangered'],
						},
					},
					series: [{
						name: '',
						type: 'map',
						map: 'zhanjiang',
						label: {
							show: false
						},
						data: [],//看axios请求的数据
					}]
				},
			}
		},
		mounted() {
			this.initEchartInfo();//执行initEchartInfo方法
		},
		methods: {
			//获取地图接口数据
		    getAxiosData() {
		      let self = this;
		      let params = {
		      	//这里放置接口请求需要的参数
		      };
		      //以下是接口请求
		      self.$api.dataCount
		        .getAxiosData(params )
		        .then((res) => {
		          if (res.data.code === 1) {
		            self.option.series[0].data = res.data.data.map((item) => {
		              return {
		                name: item.areaName,
		                value: item.num,
		              }; //目的是将接口返回的数据转为地图展示需要的格式，然后赋给option.series[0].data
		            });

					//这一行就是关键，需要在请求完数据后才执行这一行，不然地图上面的数据不会响应
		            self.myChart.setOption(self.option);
		            
		          }
		        })
		        .catch(() => {});
		    },
			initEchartInfo() {
				//let echarts = require('echarts');//若有在main.js全局引入就不需要这一行
				echarts.init(document.getElementById("echartInfo")).dispose();//销毁，这一步是考虑到有时候会动态改变地图data数据，先销毁再初始化
				this.myChart = echarts.init(document.getElementById("echartInfo"));//初始化
				//this.myChart = echarts.init(this.$refs.echartInfo);//初始化(ref)
				echarts.registerMap('zhanjiang', zhanjiangMP);//这一步是引用JSON文件，第一个参数需要和上面series.map的名称对应
				this.getAxiosData();//调用执行接口请求方法
			},
		},
	}
</script>
<style lang="scss" scoped>
	
</style>

总结：以上就是关于echarts地图的展示用法