Yii2.0.48 图表组件配置指南【ECharts】-php教程-PHP中文网

在 Yii2.0.48 中集成 ECharts 需手动控制加载时机与 DOM 初始化顺序，推荐 CDN 引入或自定义 AssetBundle，确保容器宽高明确、init 在 DOM 就绪后执行，并处理 Pjax 导致的图表丢失问题。

yii2.0.48 图表组件配置指南【echarts】

在 Yii2.0.48 项目中集成 ECharts 图表组件时，需绕过框架默认的 AssetBundle 自动加载冲突，手动控制 echarts.min.js 加载时机与 DOM 初始化顺序，否则图表容器会渲染为空白或报“Cannot read property 'init' of undefined”错误。

引入 ECharts JS 文件

方法一：通过 CDN 在视图文件顶部直接引入（推荐用于开发调试）
在 views/layouts/main.php 的内，放在 jQuery 之后、其他自定义 JS 之前：

方法二：注册为 Yii AssetBundle（适用于生产环境）
新建 assets/EChartsAsset.php：

```php
namespace app\assets;
use yii\web\AssetBundle;
class EChartsAsset extends AssetBundle
{
public $sourcePath = '@npm/echarts@5.4.3/dist';
public $js = ['echarts.min.js'];
public $depends = ['yii\web\JqueryAsset']; // 必须依赖 jQuery
}
```

然后在视图中调用：EChartsAsset::register($this);

创建图表容器并初始化

第一步：在视图（如 views/site/index.php）中声明带明确宽高的 DOM 容器

第二步：确保容器在 DOM 加载完成后才初始化图表
必须将 echarts.init() 放在 $(document).ready() 或 window.onload 中，否则可能因 DOM 未就绪而获取不到元素：

```js
$(function() {
const chartDom = document.getElementById('sales-chart');
if (!chartDom) return;
const myChart = echarts.init(chartDom, 'light', { renderer: 'canvas' });
// 后续 setOption...
});
```

注意：Yii2 默认启用 Pjax，若页面启用了 Pjax 刷新，需在 pjax:success 事件中重新 init 图表，否则二次加载后图表消失。

配置 option 并渲染图表

① 构建基础 option 对象，包含 title、xAxis、yAxis、series 等核心字段

ECharts Master

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

下载

② series 数据必须为纯数组，不可含 PHP 对象或 null 值——Yii2 中从控制器传来的数据需用 Json::encode() 处理：

```php
// Controller
return $this->render('index', [
'chartData' => Json::encode([120, 200, 150, 80]),
'categories' => Json::encode(['Q1', 'Q2', 'Q3', 'Q4']),
]);
```

③ 在 JS 中注入数据：
```js
const option = {
title: { text: '季度销售额' },
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: = $categories ?> },
yAxis: { type: 'value' },
series: [{
name: '销售额',
type: 'bar',
data: = $chartData ?>
}]
};
myChart.setOption(option);
```

④ 添加响应式适配（关键）：
在窗口 resize 时调用 myChart.resize()，但需防抖，避免高频触发导致卡顿：

```js
let resizeTimer;
$(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => myChart.resize(), 200);
});
```

处理 Pjax 导致的图表丢失

方法一：监听 pjax:success 事件，在每次 Pjax 加载后重建图表

```js
$(document).on('pjax:success', function() {
if (typeof myChart !== 'undefined') myChart.dispose();
const chartDom = document.getElementById('sales-chart');
const myChart = echarts.init(chartDom);
myChart.setOption(option); // option 需全局可访问或重生成
});
```

方法二：禁用目标容器的 Pjax 包裹——在视图中用 data-pjax="0" 属性排除该区块：

【必须确保该 div 不被 Pjax 容器包裹，否则 init 调用会被中断】