当前位置：首页 > JavaScript

js实现疫情

2026-04-06 18:16:22JavaScript

使用JavaScript实现疫情数据展示

通过调用公开的疫情数据API，可以动态获取并展示疫情相关信息。以下是一个基础的实现方法：

// 获取疫情数据
async function fetchCovidData() {
  const response = await fetch('https://api.covid19api.com/summary');
  const data = await response.json();
  return data;
}

// 渲染数据到页面
function renderCovidData(data) {
  const container = document.getElementById('covid-container');

  data.Countries.forEach(country => {
    const countryElement = document.createElement('div');
    countryElement.innerHTML = `
      <h3>${country.Country}</h3>
      <p>确诊: ${country.TotalConfirmed}</p>
      <p>死亡: ${country.TotalDeaths}</p>
      <p>治愈: ${country.TotalRecovered}</p>
    `;
    container.appendChild(countryElement);
  });
}

// 初始化
fetchCovidData()
  .then(data => renderCovidData(data))
  .catch(error => console.error('获取数据失败:', error));

使用图表库可视化疫情数据

结合Chart.js等图表库可以更直观地展示疫情趋势：

import Chart from 'chart.js';

async function createCovidChart() {
  const data = await fetchCovidData();
  const ctx = document.getElementById('covid-chart').getContext('2d');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.Countries.slice(0, 10).map(c => c.Country),
      datasets: [{
        label: '确诊人数',
        data: data.Countries.slice(0, 10).map(c => c.TotalConfirmed),
        backgroundColor: 'rgba(255, 99, 132, 0.2)'
      }]
    }
  });
}

实现疫情地图展示

使用Leaflet等地图库可以创建交互式疫情地图：

js实现疫情

import L from 'leaflet';

async function initCovidMap() {
  const data = await fetchCovidData();
  const map = L.map('covid-map').setView([20, 0], 2);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

  data.Countries.forEach(country => {
    if(country.Lat && country.Lon) {
      L.circleMarker([country.Lat, country.Lon], {
        radius: Math.log(country.TotalConfirmed) * 2,
        color: '#ff0000'
      }).bindPopup(`${country.Country}: ${country.TotalConfirmed}例`).addTo(map);
    }
  });
}