首页分享完美起航

完美起航

来源：花匠小妙招时间：2025-05-13 18:05

使用 ECharts 开发数据仪表盘

数据仪表盘是现代数据可视化的重要组成部分，它通过综合展示多个数据图表，帮助用户快速了解数据趋势、状态和关键指标。在本篇文章中，我们将详细讲解如何使用 ECharts 框架开发一个完整的数据仪表盘，介绍如何综合运用多种图表类型，处理图表布局、交互与响应式设计，并展示如何将图表组合到一起构建实用的仪表盘。

一、什么是数据仪表盘？

数据仪表盘是一种可视化工具，它将多个关键数据指标汇聚在同一个页面，用户可以通过仪表盘快速获取多个维度的数据信息。数据仪表盘通常由以下几个部分组成：

KPI 指标：展示核心数据，如业务的关键绩效指标。 折线图、柱状图：用于展示趋势性数据。 饼图、雷达图：用于对比不同类别的占比数据。 散点图、热力图：用于展示数据分布和密度。 动态交互：包括刷新、缩放、拖动等操作。

二、搭建数据仪表盘的步骤

1. 项目初始化

首先，创建一个包含 ECharts 的基础项目。在这里，我们假设使用了 HTML 和 JavaScript 构建。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据仪表盘</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <style> .dashboard { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; padding: 20px; } .chart-container { width: 100%; height: 400px; } </style> </head> <body> <div class="dashboard"> <div id="lineChart" class="chart-container"></div> <div id="barChart" class="chart-container"></div> <div id="pieChart" class="chart-container"></div> <div id="gaugeChart" class="chart-container"></div> </div> <script> // 初始化图表容器 const lineChart = echarts.init(document.getElementById('lineChart')); const barChart = echarts.init(document.getElementById('barChart')); const pieChart = echarts.init(document.getElementById('pieChart')); const gaugeChart = echarts.init(document.getElementById('gaugeChart')); </script> </body> </html>

HTML

此时，我们创建了一个基础的仪表盘布局，采用了 CSS Grid 布局，包含 4 个图表容器（折线图、柱状图、饼图、仪表盘）。

2. 添加折线图（Line Chart）

折线图用于展示连续数据的变化趋势。我们可以使用 ECharts 的基本折线图配置，展示 KPI 数据随时间的变化。

// 配置折线图 const lineOption = { title: { text: '业务趋势折线图', }, tooltip: { trigger: 'axis', }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], }, yAxis: { type: 'value', }, series: [ { name: '订单量', type: 'line', data: [820, 932, 901, 934, 1290, 1330, 1320], smooth: true, // 平滑曲线 }, ], }; // 渲染折线图 lineChart.setOption(lineOption);

JavaScript

说明 xAxis：横轴为时间段（周一到周日）。 yAxis：纵轴为订单量。 series：图表类型为折线图，数据点为不同天的数据。

3. 添加柱状图（Bar Chart）

柱状图可以用于对比多个类别的数据。我们在仪表盘中展示不同产品的销售量。

// 配置柱状图 const barOption = { title: { text: '产品销售量柱状图', }, tooltip: { trigger: 'axis', }, xAxis: { type: 'category', data: ['产品A', '产品B', '产品C', '产品D'], }, yAxis: { type: 'value', }, series: [ { name: '销量', type: 'bar', data: [120, 200, 150, 80], itemStyle: { color: '#3498db', // 自定义柱状颜色 }, }, ], }; // 渲染柱状图 barChart.setOption(barOption);

JavaScript

说明 xAxis：产品名称作为横轴类别。 series：数据代表每个产品的销售量，类型为柱状图。

4. 添加饼图（Pie Chart）

饼图适合展示不同类别数据的占比。我们展示市场份额分布情况。

// 配置饼图 const pieOption = { title: { text: '市场份额饼图', left: 'center', }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)', }, series: [ { name: '市场份额', type: 'pie', radius: '50%', data: [ { value: 1048, name: '产品A' }, { value: 735, name: '产品B' }, { value: 580, name: '产品C' }, { value: 484, name: '产品D' }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, }, ], }; // 渲染饼图 pieChart.setOption(pieOption);

JavaScript

说明 radius：定义饼图的半径。 data：每个饼块的数据值与名称。

5. 添加仪表盘（Gauge Chart）

仪表盘可以展示实时的单个指标，如当前 KPI 达成率或系统性能监控。

// 配置仪表盘 const gaugeOption = { title: { text: 'KPI 达成率仪表盘', left: 'center', }, series: [ { name: 'KPI 达成率', type: 'gauge', detail: { formatter: '{value}%' }, data: [{ value: 75, name: '达成率' }], }, ], }; // 渲染仪表盘 gaugeChart.setOption(gaugeOption);

JavaScript

说明仪表盘用于展示 KPI 达成情况，可以自定义数值和样式。

6. 动态交互与响应式设计

在仪表盘中，数据是动态变化的，ECharts 支持通过 API 动态更新数据。比如，可以使用 setInterval 定时更新数据，让仪表盘图表实时反映最新状态。

setInterval(function () { const newData = Math.round(Math.random() * 100); gaugeChart.setOption({ series: [ { data: [{ value: newData, name: '达成率' }], }, ], }); }, 2000); // 每2秒更新一次

JavaScript

说明使用 setOption 动态更新数据。在仪表盘项目中，图表的实时更新是常见需求，ECharts 提供了很好的动态更新支持。

7. 响应式设计

ECharts 默认支持响应式布局，可以自动适配不同屏幕尺寸。在设计仪表盘时，可以通过 window.onresize 方法确保图表在窗口大小变化时自动调整大小。

window.onresize = function () { lineChart.resize(); barChart.resize(); pieChart.resize(); gaugeChart.resize(); };

JavaScript

三、总结

通过本文的介绍，我们已经了解了如何使用 ECharts 开发一个完整的数据仪表盘，结合折线图、柱状图、饼图和仪表盘等多种图表类型，展示丰富的数据指标。同时，我们还学习了如何处理布局、响应式设计和动态交互。您可以根据业务需求，自定义更多图表类型，并整合至数据仪表盘中，为用户提供更好的数据可视化体验。

希望这篇文章能帮助您更好地掌握 ECharts 的使用，并为您构建数据仪表盘提供

有价值的参考！

完美起航

使用 ECharts 开发数据仪表盘

一、什么是数据仪表盘？

二、搭建数据仪表盘的步骤

1. 项目初始化

2. 添加折线图（Line Chart）

3. 添加柱状图（Bar Chart）

4. 添加饼图（Pie Chart）

5. 添加仪表盘（Gauge Chart）

6. 动态交互与响应式设计

7. 响应式设计

三、总结

推荐分享

家庭养花风水知识家庭养花“五行说”

家庭养花知识大全家庭养花有什么好处

秋天养花，掌握这5点养花知识，正确管理花卉，让花健康生长

【花卉知识】养花须知：新手养花的选购技巧，不要当冤大头！

完美起航

使用 ECharts 开发数据仪表盘

一、什么是数据仪表盘？

二、搭建数据仪表盘的步骤

1. 项目初始化

2. 添加折线图（Line Chart）

3. 添加柱状图（Bar Chart）

4. 添加饼图（Pie Chart）

5. 添加仪表盘（Gauge Chart）

6. 动态交互与响应式设计

7. 响应式设计

三、总结

推荐分享

家庭养花风水知识 家庭养花“五行说”

家庭养花知识大全 家庭养花有什么好处

秋天养花，掌握这5点养花知识，正确管理花卉，让花健康生长

【花卉知识 】养花须知：新手养花的选购技巧，不要当冤大头！

家庭养花风水知识家庭养花“五行说”

家庭养花知识大全家庭养花有什么好处

【花卉知识】养花须知：新手养花的选购技巧，不要当冤大头！