用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}
确诊：{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>