SOURCE

console 命令行工具 X clear

                    
>
console
let dom = $('#bar');
let chart = echarts.init(document.getElementById('bar'));
let option = {};
function getData(){
  let url = 'http://api.tianapi.com/txapi/ncov/index?key=9d2ed450b9692452c645db9bb9febd8b';
$.get(url,res=>{
   $('.error').html('status:'+res.code)
  if(res && res.code == 200){
    console.log(res.newslist[0])
    let news = res.newslist[0].news;
    let cases = res.newslist[0].case;
    let desc = res.newslist[0].desc;
    
  	let provinces = [];
    let confirm = [];
    let cured = [];
    let suspected = [];
    let dead = []
    
    let total = 0;
    if(!cases)
      return
      
    cases = cases.sort((a,b)=>{
      return b.confirmedCount-a.confirmedCount
    });
    cases.forEach(d=>{
      provinces.push(d.provinceShortName);
      confirm.push(d.confirmedCount);
      cured.push(d.curedCount);
      suspected.push(d.suspectedCount);
      dead.push(d.deadCount);
      total += d.confirmedCount;
      $('select').append(`<option value='${d.provinceShortName}'>${d.provinceShortName}</option>`)
    })
    $('.total span').html('确诊总数 '+ total);
    $('#remark ul').html('<li>````</li>');
		$('#remark ul').append(`<li>${desc.countRemark}</li>`);
    $('#remark ul').append(`<li>疑似数量 ${desc.suspectedCount}</li>`);
    $('#remark ul').append(`<li>${desc.note1}</li>`);
    $('#remark ul').append(`<li>${desc.remark1}</li>`);
    $('#remark ul').append(`<li>${desc.remark2}</li>`);
    $('#remark ul').append(`<li>${desc.generalRemark}</li>`);
    option = {
     color: ['#4cabce','#e5323e','#003366', '#006699' ],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
            type: 'shadow'        // 默认为直线,可选为:'line' |
        }
    },
    grid: {
        left: '3%',
        right: '6%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
       {
            type: 'category',
            data: provinces,
        }
       
    ],
    series: [
        {
            name: '确诊',
            type: 'bar',
            data: confirm
        },
      // {
      //       name: '疑似',
      //       type: 'bar',
      //       data: suspected
      //   },
      
      {
            name: '死亡',
            type: 'bar',
            data: dead
        },
      
      {
            name: '治愈',
            type: 'bar',
            data: cured
        },
    ]
};
    
    chart.setOption(option);
    
    
    
    
  }else{
    $('.error').html('api error')
  }
})
}
getData();

$('#refresh').on('click',()=>{
  $('.total span').html('刷新中');
  $('select').val('全国');
  getData();
})

function jumpCity(val){
  if(val == '全国'){
    getData();
    return
  }
  let url = 'http://api.tianapi.com/txapi/ncovcity/index?key=9d2ed450b9692452c645db9bb9febd8b';
  $.get(url,res=>{
     if(res && res.code == 200){
      let news = res.newslist;
      
			let cities = [];
       
      let axios = [];
      let confirm = [];
      let cured = [];
      let suspected = [];
      let dead = []

      let total = 0;
       news.forEach(d=>{
         if(d.provinceShortName == val){
           cities = d.cities
         }
       });
       cities.forEach(d=>{
         axios.push(d.cityName);
         confirm.push(d.confirmedCount);
         cured.push(d.curedCount);
         dead.push(d.deadCount);
         total += d.confirmedCount; 
       });
       $('.total span').html('确诊总数 '+ total);
       option = {
     color: ['#4cabce','#e5323e','#003366', '#006699' ],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
            type: 'shadow'        // 默认为直线,可选为:'line' |
        }
    },
    grid: {
        left: '3%',
        right: '6%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
       {
            type: 'category',
            data: axios,
        }
       
    ],
    series: [
        {
            name: '确诊',
            type: 'bar',
            data: confirm
        },
      // {
      //       name: '疑似',
      //       type: 'bar',
      //       data: suspected
      //   },
      
      {
            name: '死亡',
            type: 'bar',
            data: dead
        },
      
      {
            name: '治愈',
            type: 'bar',
            data: cured
        },
    ]
};
    
    chart.setOption(option);
     }
  })
}
console.log(trendData)

function drawTrend(){
  let trendChart = echarts.init(document.getElementById('trend'));
  let dates = [];
  let confirms = [];
  let suspects = [];
  trendData.forEach(d=>{
    dates.push(d.date);
    confirms.push(d.confirmed);
    suspects.push(d.suspected);
  })
  let option = {

    visualMap: [
      {
        show: false,
        type: 'continuous',
      color:['#D40217', '#FA840F', '#F3FA76'],
        seriesIndex: 0,
       min: 0,
        max: 5000
    }
    ],

    title: {
        left: '5%',
        text: '趋势'
    },
    grid: {
        left: '5%',
        right: '6%',
        bottom: '3%',
        containLabel: true
    },
    legend:{
      show:true,
      align:'right'
    },
    tooltip: {
        trigger: 'axis',
      
      show:false,
    },
    xAxis: {
        data: dates
    },
    yAxis: {
        splitLine: {show: false}
    },
    series: [
      {
        type: 'line',
        name:'确诊',
        showSymbol: false,
        smooth: true,
        data: confirms
    },
       {
        type: 'line',
      name:'疑似',
        showSymbol: false,
        data: suspects,
      
      lineStyle:{
      	normal:{
      	color:'#3DEDEA',
      type:'dashed'
      }
      }
    },
    ]
};
  trendChart.setOption(option)
}
drawTrend();




<script src="http://jsrun.pro/CYfKp.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.js"></script>
<div class='total'>
   <select onchange='jumpCity(this.value)'>
  <option value="全国" >全国</option>
</select>
  <span ></span>
 
  <i id="refresh">刷新</i></div>


<div id='bar'>
  
</div>
<div id=trend>
  
</div>
<div id="remark">
  <ul>
    
  </ul>
</div>
<span class='error'></span>
<div class='footer'>
  (每十分钟更新,数据由丁香园整理, 天行数据接口,echarts)
</div>

html{
  overflow-x: hidden;
}
#trend{
  width:100%;
  height:320px;
  float:left;
}
#bar{
  width:100%;
  height:750px;
  float:left;
}
#remark{
  width:100%;
  float:left;
  color:#3e3e3e;
}
.total{
  margin-left:50px;
  margin-top:40px;
  float:left;
  width:100%;
}
.total span{
    background:#4865f3;
  color:#fff;
  padding:0 7px;
  }
i{
  cursor:pointer;
  color:blue;margin-left:10px;
}
.footer{
  width:100%;
  float:left;
  font-size:12px;
  color:#8c8c8c;
}
select{
}
.error{
  
}