PHP二次开发ECharts,vps adsl,海外云主机推荐,哪里的vps便宜,买一个vps有什么用

🗣 Wd提问: PHP二次开发ECharts

🤖 Ai回答:
下面给出一份「从 0 到 1」的 PHP 二次开发 ECharts 的完整思路与示例代码，兼顾「数据层（PHP）」与「展现层（ECharts）」的解耦、可维护、可扩展。你可以把它直接嵌入现有框架（Laravel、ThinkPHP、CodeIgniter…），也可以作为独立脚本运行。

————————————————
一、整体架构
1、PHP 只做两件事
• 连接数据库（或缓存、API）→ 取数 → 组装成 ECharts 需要的 JSON 格式
• 输出 JSON（或直接渲染页面时内嵌 JS 变量）

2、前端拿到 JSON 后直接 new echarts.init(...).setOption(option)
不再让 PHP 拼接 HTML/JS 字符串，彻底分离视图与逻辑。

————————————————
二、目录示例（独立脚本版）
project/
├─ data.php // 返回 JSON 的接口
├─ index.html // 纯静态页面，负责加载 ECharts
└─ assets/
└─ echarts.min.js

————————————————
三、PHP 端：data.php
php
<?php
// 允许跨域（如前后端分离）
header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *');

// 1、连接数据库（示例用 PDO）
$pdo = new PDO('mysql:host=127.0.0.1;dbname=demo;charset=utf8mb4', 'user', 'pass');

// 2、查询数据：按月份统计订单金额
$sql = SELECT DATE_FORMAT(create_time,'%Y-%m') AS month,
SUM(amount) AS money
FROM orders
WHERE create_time = DATE_SUB(CURDATE(), INTERVAL 12 MONTH)
GROUP BY month
ORDER BY month;
$stmt = $pdo-query($sql);
$rows = $stmt-fetchAll(PDO::FETCH_ASSOC);

// 3、组装成 ECharts 需要的格式
$option = [
'title' = ['text' = '近12个月订单金额'],
'tooltip'= ['trigger'= 'axis'],
'xAxis' = ['type'='category', 'data'=[]],
'yAxis' = ['type'='value'],
'series' = [
[
'name' = '金额',
'type' = 'bar',
'data' = []
]
]
];

foreach ($rows as $r) {
$option['xAxis']['data'][] = $r['month'];
$option['series'][0]['data'][] = (float)$r['money'];
}

// 4、输出 JSON
echo json_encode($option, JSON_UNESCAPED_UNICODE);

————————————————
四、前端：index.html
html
<!DOCTYPE html
<html
<head
<meta charset=utf-8/
<titlePHP + ECharts Demo</title
<script src=assets/echarts.min.js</script
<style main{width:800px;height:400px;margin:0 auto;} </style
</head
<body
<div id=main</div

<script
fetch('data.php')
.then(res = res.json())
.then(option = {
const chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
window.addEventListener('resize', () = chart.resize());
});
</script
</body
</html

浏览器打开 index.html 即可看到柱状图。

————————————————
五、进阶：在 Laravel 中优雅集成
1、路由
php
Route::get('/api/chart/order', [ChartController::class, 'order']);

2、Controller
php
class ChartController extends Controller
{
public function order()
{
$data = Order::selectRaw(DATE_FORMAT(created_at,'%Y-%m') month, SUM(amount) money)
-where('created_at', '=', now()-subYear())
-groupBy('month')
-orderBy('month')
-get();

return response()-json([
'title' = ['text'='近12个月订单金额'],
'tooltip'= ['trigger'='axis'],
'xAxis' = ['type'='category','data'=$data-pluck('month')],
'yAxis' = ['type'='value'],
'series' = [
['name'='金额','type'='bar','data'=$data-pluck('money')]
]
]);
}
}

3、Blade 视图
blade
@extends('layouts.app')
@section('content')
<div id=main style=width:100%;height:400px;</div
@endsection

@push('scripts')
<script src=https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js</script
<script
fetch('{{ route(api.chart.order) }}')
.then(r = r.json())
.then(opt = echarts.init(document.getElementById('main')).setOption(opt));
</script
@endpush

————————————————
六、常见二次开发场景
1、动态筛选：前端把 start/end 参数传给 data.php，PHP 用占位符 `WHERE create_time BETWEEN ? AND ?` 防止 SQL 注入。
2、多图联动：一个接口返回多个 option，前端用 `echarts.connect([chart1, chart2])` 实现联动。
3、大数据：PHP 端只返回聚合结果（如 100 条），前端 `large: true` + `progressive` 做增量渲染。
4、缓存：接口加 `Cache::remember('chart:order', 300, fn() = ...)`，5 分钟刷新一次。
5、权限：接口加 `auth:sanctum` 中间件，前端携带 token。

————————————————
七、调试技巧
• 浏览器 Network 面板查看 data.php 返回的 JSON 是否合法。
• 用 `JSON.parse()` 手动验证 option 结构。
• PHP 端 `json_last_error_msg()` 快速定位编码问题。
• ECharts 官方实例 → 把 PHP 生成的 JSON 粘进去，一键验证。

————————————————
一句话总结
“让 PHP 只做数据，让 ECharts 只做图表”，接口保持最小 JSON，二次开发自然可插拔、可缓存、可测试。

Ai作答

📣 商家广告：