首先，打开cmd 输入 vue create 项目名称 创建项目
接下来，cd 该项目名称
这里需要用到echarts和jsonp
下载echarts和jsonp
需要先下载 yarn 指令 npm install -g yarn
下载完后 输入指令 yarn add echarts jsonp
安装完毕后
运行 指令 npm run serve 启动vue
如果http://localhost:8080能正确显示，说明vue项目创建好了
接下来用Visual Studio Code 打开创建的项目
我这里直接在components文件夹的HelloWorld.vue 进行修改
具体代码如下：

<template><div class="hello" ><!-- 初始化echarts需要有个宽高的盒子 --><div ref="mabox" style="height:760px;width:920px"></div></div>
</template><script>
import echarts from 'echarts'
import 'echarts/map/js/china.js'
import jsonp from 'jsonp'
const option={title:{text:"鲍鲍-最新疫情地图"//显示标题},series:[{name:'确诊人数',//鼠标移动提示文字 在显示人数上面type:'map',//告诉echarts 要去渲染地图map:'china',//告诉echart 要去渲染中国地图label:{//控制显示对于地区的汉字show:true,color:'gray',//控制地区名的字体颜色fontSize:10},itemStyle:{areaColor:'white',//设置地图背景色borderColor:'light gray'//设置地图边线颜色},roam:true,//支持滚轮放大缩小 以及拖拽zoom:1.2,//控制地图的放大和缩小emphasis:{//控制鼠标滑过之后的背景色和字体颜色label:{color:'#fff',fontSize:12},itemStyle:{areaColor:'#83b5e7',borderColor:'black'}},data:[]//用来展示后台给的数据}],visualMap:[{type:'piecewise',show:true,pieces:[//分段{min:10000},{min:1000,max:9999},{min:100,max:999},{min:10,max:99},{min:1,max:9}],// orient:'horizontal' //修改横向显示 默认垂直显示inRange:{symbol:'rect',//显示数据方块小图标形状color:['#ffc0b1','#9c0505']// 显示颜色}}],tooltip:{trigger:'item'//设置鼠标滑过，提示多少人}}
//使用地图 需要先注册地图
export default {name: 'HelloWorld',mounted(){this.getData();//创建mychart实例this.mychart=echarts.init(this.$refs.mabox);this.mychart.setOption(option);//加载option},methods:{getData(){//从新浪取到json数据jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',{},(err,data)=>{if(!err){console.log(data);//代表数据请求成功let list=data.data.list.map(item=>({name:item.name,value:item.value}))option.series[0].data=list;//将数据赋给series里面的data然后进行渲染//能够执行的前提是DOM已经渲染完成，只有DOM渲染完成才能够执行echarts的初始化this.mychart.setOption(option);}})}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>