用Echarts做一个简单的疫情动态图

简单的疫情动态图(vue需要的模块自行下载)

<template>
    <div>
        <div style="width:100%;height:600px" id="chart"></div>
    </div>
</template>
<script>
import echarts from 'echarts'
import jsonp from 'jsonp'
import 'echarts/map/js/china'

let option ={
    title:{
        text:'vue实现疫情地图',
        x:'center',
        textStyle:{
            color:'#9c0505'
        }
    },
    tooltip:{//提示信息
        trigger:'item',
        //地图:{a}(系列名称)，{b}区域名称，{c}合并数值，{d}(无)
        formatter:'地区：{b}<br/>确诊：{c}'
    },
    series:[
        {
            type:'map',
            map:'china',
            data:[
                {name:'北京',value:200},
                {name:'湖北',value:2000}
            ],
            label:{
                show:true,
                color:'red',
                fontSize:10
            },
            zoom:1.2,
            itemStyle:{
                borderColor:'blue'
            },
            emphasis:{
                label:{//图形上的文本标签，可用于说明图形的一些数据信息
                color:'#fff',
                fontSize:10
                },
                itemStyle:{
                 areaColor:'green'
                },
            }
        }
    ],
    visualMap:{ //视觉地图
        // min:800,
        // max:50000,
        // text:['High','Low'],
        // realtime:false,
        // calculable:true,//拖拽手柄
        // inRange:{
        //     color:['lightskyblue','yellow','orangered']
        // }
        type:'piecewise',
        show:true,
        pieces:[
            {min:10000},
            {min:1000,max:9999},
            {min:100,max:999},
            {min:10,max:99},
            {min:1,max:9},
            {value:0}
        ],
        inRange:{
            color:['#fff','#ffaa85','#660208']
        },
        x:120,
        itemWidth:20,
        itemHeight:18,
    }
}

export default{
    data(){
        return {
            myChart:''
        };
    },
     mounted () {
         this.getData();
         this.myChart=echarts.init(document.getElementById('chart'))
            // myChart.setOption(option);
    },
    methods:{
       //真实数据 
       getData(){
           jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',(err,data)=>{
               console.log(data.data.list)
               var lists=data.data.list.map(item=>{return {name:item.name,value:item.value}});
               console.log(lists);
               option.series[0].data=lists;
               this.myChart.setOption(option);
           })
       }
    }
   
}
</script>