vue实现疫情地图

vue-cli 4.0 版本
安装 : npm install -g @vue/cli

代码文件：
components ——》map.vue

<template>
	<div class='map'>
		<div id="chart1" style="width: 98%;height: 600px;"></div>
	</div>
</template>

<script>
	import echarts from 'echarts'
	import jsonp from 'jsonp'
	import 'echarts/map/js/china.js'
	
	let option ={
		title:{
			text:"疫情地图",                            //图表名称
			x:'center',                                //名称位置，居中
			textStyle:{
				color:'deeppink'                       //名称颜色样式设置
			}
		},
		tooltip:{
			tigger:'item',                             //鼠标悬浮地图版块上时的提示信息
			formatter:'地区：{b}<br/>确诊：{c}'         //提示信息的内容   
			//地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
		},
		series:[
			{
				type:'map',                            //图表类型
				map:'china',                           //地图区域
				// data:[                              //地图板块数据  根据name匹配
				// 	{name:'北京',value:200},
				// 	{name:'湖北',value:20000},
				// ],
				label:{                                //地图版块名称的样式
					show:true,
					color:'red',
					fontSize:12
				},
				zoom:1.2,                              //地图显示大小，当前视角的缩放比例。
				itemStyle:{
					borderColor:'blue',                //地图版块边界线的样式
				},
				emphasis:{                             //高亮状态下的多边形和标签样式。
					label:{
						color:'#fff',                  //文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。
						fontSize:12                    //文字字体的风格
					},
					itemStyle:{
						areaColor:'green',             //地图区域的颜色。
					}
				}
			}
		],
		visualMap:{         //visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）
		    //类型为连续型。
			// min:800,
			// max:50000,
			// text:['High','Low'],
			// realtime:false,           //拖拽时，是否实时更新。
			// calculable:true,          //是