[分享]揭秘ECharts轻松获取PHP数组数据，实现动态图表展示

发布于 2025-07-16 16:47:16

1314

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松实现各种图表的展示。在 PHP 环境中，我们可以通过发送 HTTP 请求将 PHP 数组数据传递给前端，然后在前端使用 E...

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松实现各种图表的展示。在 PHP 环境中，我们可以通过发送 HTTP 请求将 PHP 数组数据传递给前端，然后在前端使用 ECharts 进行图表的动态展示。本文将详细介绍如何实现这一过程。

一、准备工作

1.1 安装 ECharts

首先，需要在项目中引入 ECharts 库。可以通过以下两种方式引入：

通过 CDN 引入：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

通过 npm 安装：
```
npm install echarts
```

1.2 PHP 环境搭建

确保你的 PHP 环境已经搭建好，并且能够正常运行。

二、获取 PHP 数组数据

2.1 创建 PHP 脚本

创建一个 PHP 脚本，用于生成数组数据。以下是一个简单的示例：

<?php
// 创建数组数据
$data = [ 'name' => 'ECharts', 'type' => 'JavaScript', 'stars' => 82000, 'forks' => 17000, 'issues' => 5000
];
// 将数组数据转换为 JSON 格式
$jsonData = json_encode($data);
// 设置响应头
header('Content-Type: application/json');
// 输出 JSON 数据
echo $jsonData;
?>

2.2 运行 PHP 脚本

将上述 PHP 脚本保存为 data.php，并运行 PHP 服务器。例如，使用 XAMPP 搭建本地服务器，访问 http://localhost/data.php，即可获取到 JSON 格式的数组数据。

三、使用 ECharts 展示图表

3.1 创建 HTML 页面

创建一个 HTML 页面，用于展示图表。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title>ECharts 动态图表展示</title> <!-- 引入 ECharts 库 --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 动态图表展示' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>
</body>
</html>

3.2 获取 PHP 数据

在 HTML 页面中，使用 JavaScript 发送 AJAX 请求获取 PHP 脚本生成的 JSON 数据。以下是一个简单的示例：

// 获取 PHP 数据
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.php', true);
xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); // 将数据添加到图表中 myChart.setOption({ series: [{ data: data }] }); }
};
xhr.send();

3.3 完成图表展示

将上述 JavaScript 代码添加到 HTML 页面的 <script> 标签中，即可完成图表的动态展示。

四、总结

通过以上步骤，我们可以轻松地使用 ECharts 在 PHP 环境中获取数组数据，并实现动态图表的展示。在实际应用中，可以根据需求调整图表类型、数据格式和样式，以达到更好的展示效果。

一个月内的热帖推荐