php如何生成可嵌入网页的动态图表_php将数据传给js图表库如echarts渲染-php教程-PHP中文网

php如何生成可嵌入网页的动态图表_php将数据传给js图表库如echarts渲染

雪夜

发布： 2025-11-29 22:03:07

原创

393人浏览过

PHP通过生成JSON数据供前端ECharts使用，实现图表展示。1. PHP从数据库获取数据并以JSON格式输出；2. 前端通过AJAX请求或内联方式获取数据；3. 使用ECharts初始化图表并渲染。关键点包括设置正确header、确保JSON合法、防范XSS，数据传递后ECharts即可动态展示图表。

php如何生成可嵌入网页的动态图表_php将数据传给js图表库如echarts渲染

PHP 本身不能直接绘制图表，但可以将数据准备好，通过接口或内联方式传递给前端 JavaScript 图表库（如 ECharts）进行渲染。实现动态图表的核心思路是：后端 PHP 查询数据并输出为 JSON，前端 JS 获取数据后交给 ECharts 渲染。

1. PHP 准备数据并输出 JSON

假设你要展示某网站每日访问量，先在 PHP 中从数据库获取数据，并组织成 ECharts 所需格式：

data.php

<?php
header('Content-Type: application/json;charset=utf-8');

// 模拟数据，实际可从数据库查询
$data = [
    ['date' => '2024-05-01', 'views' => 120],
    ['date' => '2024-05-02', 'views' => 135],
    ['date' => '2024-05-03', 'views' => 110],
    ['date' => '2024-05-04', 'views' => 160],
    ['date' => '2024-05-05', 'views' => 180],
];

$dates = array_column($data, 'date');
$values = array_column($data, 'views');

echo json_encode([
    'dates' => $dates,
    'values' => $values
]);
?>

登录后复制

2. 前端页面引入 ECharts 并渲染图表

创建一个 HTML 页面，引入 ECharts 库，使用 AJAX 或内联方式加载 PHP 输出的数据。

牛小影

牛小影 - 专业的AI视频画质增强器

420

查看详情

立即学习“PHP免费学习笔记（深入）”；

index.html 或 index.php

<!DOCTYPE html>
<html>
<head>
    <title>动态图表示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 400px;"></div>

    <script>
        // 方法一：使用 fetch 从 PHP 接口获取数据
        fetch('data.php')
            .then(response => response.json())
            .then(data => {
                const chartDom = document.getElementById('chart');
                const myChart = echarts.init(chartDom);

                const option = {
                    title: { text: '每日访问量统计' },
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: data.dates
                    },
                    yAxis: {},
                    series: [{
                        name: '访问量',
                        type: 'line',
                        data: data.values
                    }]
                };

                myChart.setOption(option);
            });
    </script>
</body>
</html>

登录后复制

3. 更简单的内联方式（PHP 直接嵌入数据）

如果不想用 AJAX，也可以在 PHP 页面中直接把数据写入 JS 变量：

<!DOCTYPE html>
<html>
<head>
    <title>内联数据图表</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 400px;"></div>

    <script>
        // PHP 直接输出数据到 JS
        const chartData = <?php echo json_encode([
            'dates' => ['周一', '周二', '周三', '周四', '周五'],
            'values' => [80, 120, 90, 140, 180]
        ]); ?>;

        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);

        const option = {
            title: { text: '周访问趋势' },
            xAxis: {
                type: 'category',
                data: chartData.dates
            },
            yAxis: {},
            series: [{
                type: 'bar',
                data: chartData.values
            }]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

登录后复制