效果:
源码:
<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 = list
this.mychart.setOption(option)
}
})
}
}
}
</script>
<style>
</style>