Vue+Echarts实现中国疫情地图

阳光穿透心脏的1/2处 2024-04-01 16:42 135阅读 0赞

效果：

![ab994b0427354d4995e20302a4718478.png][]

源码：

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

[ab994b0427354d4995e20302a4718478.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6ac8dc8b0517405491f4bde93605958d.png