「数据可视化」Echarts入门到实战打造疫情数据动态仪表盘

最新推荐文章于 2025-12-10 10:39:19 发布

原创最新推荐文章于 2025-12-10 10:39:19 发布 · 243 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#信息可视化 #echarts #前端

Echarts 入门基础

Echarts 是一个由百度开源的 JavaScript 数据可视化库，支持多种图表类型，如折线图、柱状图、饼图、散点图等。安装方式可以通过 CDN 引入或 npm 安装：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

初始化一个简单的图表需要以下步骤：

// 初始化 DOM 容器
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);

// 配置图表选项
const option = {
    title: { text: '示例图表' },
    tooltip: {},
    xAxis: { data: ['A', 'B', 'C'] },
    yAxis: {},
    series: [{ type: 'bar', data: [5, 20, 36] }]
};

// 应用配置
myChart.setOption(option);

动态数据绑定与更新

Echarts 支持动态数据更新，适用于实时数据展示。通过 setOption 方法更新数据：

// 模拟动态数据
setInterval(() => {
    const newData = [Math.random() * 100, Math.random() * 100, Math.random() * 100];
    myChart.setOption({ series: [{ data: newData }] });
}, 1000);

对于异步数据（如 API 请求），可以使用 fetch 或 axios：

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => myChart.setOption({ series: [{ data }] }));

疫情数据仪表盘实战

以 COVID-19 数据为例，构建动态仪表盘需完成以下步骤：

数据准备
使用公开的疫情数据 API（如 Johns Hopkins University 或国内卫健委数据），格式通常为 JSON 或 CSV。
图表设计
- 地图组件：展示全球或区域疫情分布。
- 折线图：显示每日新增病例趋势。
- 仪表盘：展示关键指标（如累计确诊、治愈率）。

// 地图配置示例
const option = {
    tooltip: { trigger: 'item' },
    visualMap: {
        min: 0,
        max: 10000,
        text: ['High', 'Low'],
        inRange: { color: ['#e0f3f8', '#4575b4'] }
    },
    series: [{
        name: 'COVID-19 Data',
        type: 'map',
        map: 'world',
        data: [
            { name: 'USA', value: 50000 },
            { name: 'China', value: 1000 }
        ]
    }]
};

交互功能
添加点击事件或时间轴控件：

option.timeline = {
    data: ['2020-01', '2020-02', '2020-03'],
    autoPlay: true,
    playInterval: 1000
};

性能优化与响应式设计

大数据优化：启用 large 模式或使用 dataZoom 组件。
响应式布局：监听窗口大小变化并重新调整图表：

window.addEventListener('resize', () => myChart.resize());

调试与部署

使用浏览器的开发者工具检查数据格式和图表配置。
部署时建议压缩静态资源，并考虑使用 Echarts 的按需引入以减少体积。

通过以上方法，可以快速构建一个动态、交互式的疫情数据仪表盘。如需进一步扩展，可结合 WebSocket 实现实时数据推送或集成多图表联动。