ThinkPHP数据可视化：一句话生成销售数据仪表盘【详解】-ThinkPHP-PHP中文网

用thinkphp快速搭建销售数据仪表盘，只需安装thinkphp-chart扩展、编写数据库查询逻辑、在模板中用echarts渲染折线图，再添加响应式适配与自动刷新即可完成。

thinkphp数据可视化：一句话生成销售数据仪表盘【详解】

用ThinkPHP快速搭建销售数据仪表盘，无需从零写图表代码，只需一行配置就能把数据库里的订单表变成带折线图、柱状图和关键指标卡片的可视化页面。

安装并启用数据可视化扩展包

执行命令安装官方维护的 thinkphp-chart 扩展：composer require topthink/thinkphp-chart。

安装完成后，框架会自动注册服务提供者，【无需手动修改 config/app.php】；如果项目启用了多应用模式，需进入对应应用目录下的 config/app.php 确认 thinkphp-chart 已在 providers 数组中。

定义销售数据查询逻辑

在 app/controller/Report.php 中创建控制器，添加 index 方法：

使用 Db 类按月统计销售额：$data = Db::name('order')->field('DATE_FORMAT(create_time, "%Y-%m") as month, sum(amount) as total')->group('month')->order('month')->select();

这一步必须确保 order 表中存在 create_time（datetime 类型）和 amount（decimal 或 float）字段，否则查询返回空数组会导致图表渲染失败。

一句话生成仪表盘视图

在 index 方法末尾直接返回视图，并传入数据：return view('index', ['chartData' => $data]);。

在 view/index.html 中插入以下代码：

<div id="sales-chart"></div>

ECharts Master

ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。

下载

<script src="/static/js/echarts.min.js"></script>

<script>let chart = echarts.init(document.getElementById("sales-chart"));</script>

chart.setOption({tooltip: {}, xAxis: {type: "category", data: [#{foreach $chartData as $v}{$v.month},{/foreach}]}, yAxis: {}, series: [{type: "line", data: [#{foreach $chartData as $v}{$v.total},{/foreach}]}]});

注意：模板中使用的是 ThinkPHP 原生模板语法 #{foreach}，不是 Laravel Blade 或 Vue 模板；若项目已切换为 Twig 或其它引擎，需改写循环语法。