YII2 使用Echart 简易demo

最新推荐文章于 2025-05-19 11:17:04 发布

原创最新推荐文章于 2025-05-19 11:17:04 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#yii2 #echart

PHP框架 YII2 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何在Yii2框架中集成ECharts图表库，并通过一个具体案例展示数据的动态加载与图表渲染的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步下载第三方包

使用compose下载 "bower-asset/echarts": "2.2.1"；

以及php插件composer require "hisune/echarts-php"

第二步创建asset bunnle类。

①

②

namespace app\assets;

use yii\web\AssetBundle;

class EchartsAsset extends AssetBundle
{
    public $sourcePath = '@bower/echarts/dist';
    public $js = [
		'echarts.js',
    ];
}

第三步控制器传递数据

//学校经费使用情况
$fees = Fee::find()->asArray()->all();
$typename = ArrayHelper::getColumn($fees,'name');
$typeamount = ArrayHelper::getColumn($fees,'amount');
$typeusedamount = ArrayHelper::getColumn($fees,'userAmount');
return $this->render('index', [             
                'typename' => $typename,
                'typeamount' => $typeamount,
                'typeusedamount' => $typeusedamount
            ]);

第四步 view视图渲染

<?php
use Hisune\EchartsPHP\ECharts;
?>
<div id="chart1">
<?php
    $chart = new ECharts();
    $chart->title->text = '学校下批各类经费使用情况';
    $chart->title->left= 'center';
    $chart->tooltip->show = true;
    $chart->legend->data[] = '总金额';
    $chart->legend->data[] = '使用金额';
    $chart->legend->left= 'right';
    $chart->xAxis[] = array(
        'type' => 'category',
        'data' => $typename
    );
    $chart->yAxis[] = array(
        'type' => 'value'
    );
    $chart->series[] = array(
        'name' => '总金额',
        'type' => 'bar',
        'data' => $typeamount

    );
    $chart->series[] = array(
        'name' => '使用金额',
        'type' => 'bar',
        'data' => $typeusedamount

    );
    echo $chart->render('simple-custom-1');

?>
</div>