Vue Echarts实现中国疫情地图

效果：

源码：

<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>复制