yii2 擴展echarts筆記

 

百度的echarts爲JavaScript/CSS包，採用Bower管理。
 

1. 下載echarts。

下載百度的echarts-4.5.0.zip壓縮包，解壓縮後放在
./basic/vendor/bower/echarts-4.5.0/下。

2. 重命名echarts(便於使用)。

查看目錄./basic/vendor/bower/echarts-4.5.0/下面應該有build,src,doc等文件夾以及bower.json,LICENSE.txt等文件。爲方便使用，把文件夾echarts-4.5.0改爲echarts。

3. 修改composer.json文件。

找到require這一項，應該有類似如下的內容。

    "require": {
        "php": ">=5.4.0",
        "yiisoft/yii2": "2.0.6",
        "yiisoft/yii2-bootstrap": "*",
        "yiisoft/yii2-swiftmailer": "*",
        "phpoffice/phpexcel": "^1.8"
    },

在最後一行加入"bower-asset/echarts": "4.5.0"，
變成如下形式。

    "require": {
        "php": ">=5.4.0",
        "yiisoft/yii2": "2.0.6",
        "yiisoft/yii2-bootstrap": "*",
        "yiisoft/yii2-swiftmailer": "*",
        "phpoffice/phpexcel": "^1.8",
	"bower-asset/echarts": "4.5.0"
    },

可能上面的這些內容，可以採用composer安裝
比如 composer require bower-asset/echarts "*"， 但是我這破網就沒用composer安裝成功過幾個

composer require bower-asset/echarts "*"

我這裏composer下載不了，所以手動官網下載了

4. 創建asset bundle類。

在目錄./basic/assets/創建EchartsAsset.php文件。內容如下。

namespace app\assets;

use yii\web\AssetBundle;

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

內容參照AssetBundle的教程做的。通過查閱echarts的教程，發現一般他們調用的都是@bower/echarts/src的內容，所以文中設置$sourcePath指向該文件夾。
其中@bower，YII2會自動找到./basic/vendor/bower-asset/文件夾的。
$js是查找./echarts/build/src/下的js文件，列出來的。

這裏要注意後面有個坑，視圖會加載echarts.main.js,但是新版echarts沒有這個文件，時間關係沒查文檔，直接用現有的echarts.main.js文件直接放到echarts.js同目錄下了。
這樣完成了AssetBundle的配置。

5. 安裝Echarts-PHP插件。

在目錄./basic/下輸入命令

composer require "hisune/echarts-php"

或者類似的命令或者直接在github下載，
解壓縮放在目錄./basic/vendor/下。

6. 輸出echarts圖像。

下面一個簡單的例子。
打開site/index.php文件。

加入如下內容

<?php 
use app\assets\EchartsAsset;
use Hisune\EchartsPHP\ECharts;

$asset=EchartsAsset::register($this);
$chart = new ECharts($asset->baseUrl);
$chart->tooltip->show = true;
$chart->legend->data = array('銷量');
$chart->xAxis = array(
    array(
        'type' => 'category',
        'data' => array("襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子")
    )
);
$chart->yAxis = array(
    array('type' => 'value')
);
$chart->series = array(
    array(
        'name' => '銷量',
        'type' => 'bar',
        'data' => array(5, 20, 40, 10, 10, 20)
    )
);
echo $chart->render('simple-custom-id');

說明：
第一第二行代碼是加入我們需要的類EchartsAsset跟EchartsPHP。

第三行空，第四行第五行註冊EchartsAsset類，並把註冊後的baseUrl傳遞給EchartsPHP類，供查找JavaScript/CSS文件的位置。

第六行及以後賦值，這個可以參考百度的Echarts實例跟EchartsPHP的配置。自己找規律。

最後一行，輸出圖像。