当前位置：首页 > news >正文

用ECharts地图做个疫情数据看板：从静态打点到动态飞线，手把手实现数据可视化大屏

news 2026/6/8 9:17:50

用ECharts打造疫情数据可视化大屏：从静态展示到动态交互全解析

疫情数据可视化已成为现代数据分析不可或缺的一环，而ECharts作为国内领先的数据可视化库，其强大的地图功能尤其适合构建专业级疫情数据看板。本文将带您从零开始，逐步实现一个包含静态打点、动态飞线、多图表联动的完整疫情数据可视化大屏。

1. 环境准备与基础地图搭建

1.1 项目初始化与依赖安装

首先创建一个标准的HTML5项目结构，并通过npm安装必要的依赖：

npm install echarts echarts-gl --save

对于地图可视化，我们还需要引入中国地图的JSON数据。ECharts官方不再直接提供china.js，但可以通过以下方式获取：

从ECharts官方GitHub仓库下载geoJSON格式的中国地图数据
使用第三方维护的china.js资源（注意验证数据准确性）
通过阿里云DataV等平台获取标准地理数据

1.2 基础中国地图实现

创建一个基本的HTML容器和初始化脚本：

<div id="china-map" style="width: 100%; height: 600px;"></div> <script> // 初始化echarts实例 const chart = echarts.init(document.getElementById('china-map')); // 加载中国地图JSON数据 fetch('china.json') .then(response => response.json()) .then(chinaJson => { // 注册地图数据 echarts.registerMap('china', chinaJson); // 基础配置 const option = { geo: { map: 'china', roam: true, // 允许缩放和平移 label: { show: true, fontSize: 10, color: '#333' }, itemStyle: { areaColor: '#e6f7ff', borderColor: '#1890ff', borderWidth: 1 }, emphasis: { label: { color: '#fff' }, itemStyle: { areaColor: '#1890ff' } } } }; chart.setOption(option); }); </script>

2. 疫情数据静态可视化

2.1 城市疫情数据打点

疫情数据通常包含各城市的感染人数、治愈率等指标。我们可以通过散点图(scatter)在地图上直观展示：

const option = { series: [{ type: 'scatter', coordinateSystem: 'geo', data: [ {name: '北京', value: [116.46, 39.92, 150]}, {name: '上海', value: [121.48, 31.22, 200]}, // 更多城市数据... ], symbolSize: function (val) { return Math.sqrt(val[2]) * 3; // 根据病例数调整点大小 }, encode: { value: 2 // 使用第三个值作为大小依据 }, label: { formatter: '{b}', position: 'right', show: true }, itemStyle: { color: '#ff4d4f' } }] };

2.2 分级着色与热力图效果

为了更直观展示疫情严重程度，我们可以实现区域分级着色：

const option = { visualMap: { min: 0, max: 500, text: ['严重', '轻微'], realtime: false, calculable: true, inRange: { color: ['#f0f9e8', '#bae4bc', '#7bccc4', '#43a2ca', '#0868ac'] } }, series: [{ type: 'map', map: 'china', data: [ {name: '北京', value: 150}, {name: '上海', value: 200}, // 更多省份数据... ] }] };

3. 动态效果实现

3.1 城市间飞线动画

飞线效果可以直观展示疫情传播路径或人员流动情况：

const option = { series: [{ type: 'lines', coordinateSystem: 'geo', effect: { show: true, period: 4, // 动画周期 trailLength: 0.02, // 尾迹长度 symbol: 'arrow', // 箭头形状 symbolSize: 8 // 箭头大小 }, lineStyle: { color: '#ff7f0e', width: 1, opacity: 0.6, curveness: 0.2 // 曲线程度 }, data: [{ coords: [ [116.46, 39.92], // 北京 [121.48, 31.22] // 上海 ], // 可以添加更多属性控制动画效果 }] }] };

3.2 实时数据更新与动画

结合WebSocket或定时请求实现数据的实时更新：

function fetchData() { // 模拟API请求 return new Promise(resolve => { setTimeout(() => { resolve({ timestamp: new Date().getTime(), data: generateRandomData() // 生成随机数据 }); }, 1000); }); } async function updateChart() { const {data} = await fetchData(); chart.setOption({ series: [{ data: data }] }); // 每5秒更新一次 setTimeout(updateChart, 5000); } // 初始加载 updateChart();

4. 大屏集成与性能优化

4.1 多图表联动

完整的疫情数据看板通常包含地图、折线图、柱状图等多种图表：

const option = { grid: [ {left: '5%', top: '10%', width: '45%', height: '40%'}, // 地图区域 {left: '55%', top: '10%', width: '40%', height: '40%'}, // 柱状图区域 {left: '5%', top: '55%', width: '90%', height: '40%'} // 趋势图区域 ], series: [ // 地图系列... { type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: [ {name: '确诊病例', value: 1200}, {name: '疑似病例', value: 800}, // 更多数据... ] }, { type: 'line', xAxisIndex: 2, yAxisIndex: 2, data: [ ['2023-01', 100], ['2023-02', 150], // 更多时间序列数据... ] } ] };

4.2 性能优化技巧

大数据量下的性能优化策略：

数据抽样：当数据点超过1000个时，考虑按区域聚合或抽样展示
渐进渲染：使用progressive和progressiveThreshold配置项
动画优化：适当降低动画帧率或关闭非必要动画
WebWorker：将数据处理移入WebWorker线程

const option = { series: [{ type: 'scatter', large: true, // 启用大数据模式 progressive: 400, // 渐进渲染阈值 progressiveThreshold: 1000, // 超过1000点启用渐进渲染 // ...其他配置 }] };

5. 高级功能与自定义扩展

5.1 3D地图效果

结合ECharts GL实现3D地图效果：

import 'echarts-gl'; const option = { globe: { environment: 'auto', baseTexture: '/textures/world.topo.bathy.200401.jpg', heightTexture: '/textures/bathymetry_bw_composite_4k.jpg', displacementScale: 0.04, shading: 'realistic', light: { ambient: { intensity: 0.8 }, main: { intensity: 1.5 } }, layers: [{ type: 'bar3D', data: convertTo3DData(geoData), barSize: 0.2, shading: 'realistic', // 更多3D配置... }] } };

5.2 自定义地图样式

通过GeoJSON和SVG实现高度自定义的地图样式：

// 自定义省份颜色 const customSeries = { type: 'map', map: 'china', itemStyle: { normal: { areaColor: function(params) { // 根据省份名称返回不同颜色 const provinceColors = { '北京': '#ff4d4f', '上海': '#1890ff', // 其他省份... }; return provinceColors[params.name] || '#d9d9d9'; } } } };

6. 实战案例：完整疫情数据看板

下面是一个整合了前述所有技术的完整配置示例：

const fullOption = { backgroundColor: '#0a2dae', title: { text: '全国疫情实时数据看板', subtext: '数据更新时间：' + new Date().toLocaleString(), left: 'center', textStyle: { color: '#fff' } }, tooltip: { trigger: 'item', formatter: function(params) { if (params.seriesType === 'map') { return `${params.name}<br/>确诊: ${params.value || 0}例`; } // 其他系列的自定义提示... } }, visualMap: { // 多个visualMap组件实现多维度的视觉映射 }, geo: { // 详细地图配置... }, series: [ // 地图基础系列 { type: 'map', map: 'china', // ...其他配置 }, // 散点系列 { type: 'scatter', coordinateSystem: 'geo', // ...散点配置 }, // 飞线系列 { type: 'lines', // ...飞线配置 }, // 其他图表系列... ], media: [ // 响应式配置 { query: { maxWidth: 768 }, option: { // 移动端适配配置... } } ] };

实现这样一个完整的疫情数据可视化大屏，不仅需要技术实现，还需要考虑数据准确性、视觉美观性和用户体验。在实际项目中，建议：