vue+echarts 中国地图 展示数据

在html里引的vue和echarts
开始
1 引进所需的 js 和 css

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
<script src="https://unpkg.com/element-ui/lib/index.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js">script>

2 加入html 展示区域

<div id="regionCharts" :style="{width: '50%', height: '400px'}">div>

3 在 vue的 return里定义好字段 这是后台返回的数据结构

dataList : [				
			{name: '四川', value: 800,list:[
				{name:'四川1', value:10},
				{name:'四川2', value:2},
				{name:'四川3', value:3},
				{name:'四川4', value:4},
			]},
			{name: '河北', value: 100,list:[
				{name:'河北1', value:10},
				{name:'河北2', value:2},
				{name:'河北3', value:3},
				{name:'河北4', value:4},
			]},
			{name: '河南', value: 800,list:[
				{name:'河南1', value:10},
				{name:'河南2', value:2},
				{name:'河南3', value:3},
				{name:'河南4', value:4},
			]},
			{name: '西藏', value: 500,list:[
				{name:'西藏西藏西藏1', value:10},
				{name:'西藏2', value:2},
				{name:'西藏3', value:3},
				{name:'西藏4', value:4},
			]},
			{name: '山东', value: 500,list:[
				{name:'青岛-a', value:10},
				{name:'青岛2', value:2},
				{name:'青岛3', value:3},
				{name:'济南4', value:4},
				{name:'青岛2', value:2},
				{name:'青岛3', value:3},
				{name:'济南4', value:4},
				{name:'青岛2', value:2},
				{name:'青岛3', value:3},
				{name:'济南4', value:4},
			]},
			{name: '山西', value: 500,list:[
				{name:'山东1', value:10},
				{name:'山东2', value:2},
				{name:'山东3', value:3},
				{name:'山东4', value:4},
			]}
		],

5 在 mounted 里加载你定义的方法

 mounted() {
		this.drawregionCharts();
	 },

6 在 methods 定义 drawregionCharts 方法

// 地图
drawregionCharts () {
	let regionCharts1 = echarts.init(document.getElementById('regionCharts'));
	
	regionCharts1.setOption({
		  title: {
			 text: "绑定地区分布",
		 },
		  tooltip: {
			 trigger: 'item',
			 padding: [5, 15, 5, 15],   //边距
			 textStyle: {     //文字样式
				 color: '#6A6A6A',
				 decoration: 'none',
				 fontFamily: 'Verdana, sans-serif',
			   },
			 formatter: function (params) {
				 var res = params.name+'<br/>';
				 if(params.data && params.data.list){
					let subContent =  params.data.list.map((i) => {
						return res+= i.name +":"+ i.value +"<br>"
					})
					return res ;
				 }else{
					return params.name +":"+ 0  ;
				 }
				 // return params.name +":"+ params.value +"<br/>" ;//自行定义formatter格式
			 },
			 show: true
		 },
		visualMap: {
			 min: 0,
			 max: 1500,
			 left: 'left',
			 top: 'bottom',
			 text: ['高', '低'],//取值范围的文字
			 inRange: {
			 color: ['#e0ffff', '#006edd']//取值范围的颜色
			 },
			 show: true//图注
		},
		
		geo: {
			map: 'china',
			roam: false,//不开启缩放和平移
			zoom: 1.23,//视角缩放比例
			label: {
				normal: {
					show: true,
					fontSize: '10',
					color: 'rgba(0,0,0,0.7)',
				}, 
				emphasis: {
					textStyle: {
						color: '#fff',
					}
				}
		
			},
			itemStyle: {
				normal: {
					 borderColor: 'rgba(0, 0, 0, 0.2)',
				},
				emphasis: {
					areaColor: '#F3B329',//鼠标选择区域颜色
					shadowOffsetX: 0,
					shadowOffsetY: 0,
					shadowBlur: 20,
					borderWidth: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		},
		series: [
			{
				name: '',
				type: 'map',
				map:"china",
				geoIndex: 0,
			  data:this.dataList,
			}
		]		
	})
},

7 关键一步 此时会发现 地图数据没有展示出来 我们需要引进 官方的中国地图数据 china.js 或者 china.json

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js">script>

8 如果需要 在vue项目里 则需要下载和引进 echarts ，china.js，

8-1）
	 npm install echarts --save  下载安装echarts的插件
8-2） 
	在main.js 引进 供全局使用
	import echarts from 'echarts' // 这一步是引入echarts的插件
	Vue.prototype.$echarts = echarts // 这一步是为了能在全局直接使用
	***记得引进 在main.js中同是也引进 china.js 或者 china.json,这个包在你下载echarts是已经下载下来 只需看好路径引进就行***
	import china from 'echarts/map/json/china.json' // 引入json文件
	echarts.registerMap('china', china) // 在echarts中注册使用这个文件

9 最终达到以下效果，每天进步一点 ，如有问题欢迎随时沟通