效果：
源码：
<template><div><div ref = "mapbox" style = "height:800px;width:100%"></div></div>
</template><script>
import 'echarts/map/js/china.js'
import jsonp from 'jsonp'const option = {title:{text:"陶然同学",lik:"https://blog.csdn.net/weixin_45481821?spm=1010.2135.3001.5343",subtext:"关注我",sublink:"https://blog.csdn.net/weixin_45481821?spm=1010.2135.3001.5343"},series:[{name:'确诊人数',type:'map', //类型地图map:'china', //告诉echarts渲染哪个地图label:{show:true, //是否显示标签color:'red', //标签颜色fontSize:10 //标签大小},itemStyle:{areaColor:'yellow', //地图眼色borderColor:'red' //地图边框眼色},emphasis:{ //鼠标移入效果label:{ //标签color:'blue',fontSize:12,},itemStyle:{ //地图样式areaColor:'red'}},data:[], //用来展示后台给的数据roam:true, //开启缩放和拖拽zoom:1.2 //控制地图的缩放和放大}],visualMap:[{ //视觉映射组件(条件筛选)type:'piecewise', //类型分为分段型和连续型show:true, //是否显示 默认显示splitNumber:5, //分段数量pieces:[ //自定义每一段组件范围{min:10000},{min:1000,max:9999},{min:100,max:999},{min:10,max:99},{min:1,max:9}], //align:'right' //指定组件中图形（比如小方块）和文字的摆放关系//orient:'horizontal', //如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。//left:100, //visualMap 组件离容器左侧的距离。//showLabel:false, //是否显示每项的文本标签inRange:{symbol:'rect', //组件类型color:['#ffc0b1','#9c0505'] //组件颜色(根据数量不同 颜色深浅也不同)},itemWith:20, //图形的宽度，即每个小块的宽度。itemHeight:10 //图形的高度，即每个小块的高度。}],tooltip:{trigger:'item'},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: { readOnly: false },restore: {},saveAsImage: {}}},
}export default {mounted(){this.getData()this.mychart = this.$echarts.init(this.$refs.mapbox)this.mychart.setOption(option)},methods:{getData(){jsonp(`https://interface.sina.cn/news/wap/fymap2020_data.d.json`,{},(err,data) =>{if(!err){console.log(data)let list = data.data.list.map(item => ({name:item.name,value:item.value}))option.series[0].data = listthis.mychart.setOption(option)}})}}
}
</script><style></style>