yii2加入百度echarts的一般步骤 [ 2.0 版本 ]

转移到这里了，如有改动，以转移后的为准，非本文。

参考这里。

对于联网的网站，可以采用上述网址里的做法。下面叙述对无法联网的或者想把echarts下载后放在自己网站离线使用的做法。

百度的echarts为JavaScript/CSS包，采用Bower管理。可以采用如下方式在YII2中使用。
假设你的网站目录为./basic。

1. 下载echarts。

下载百度的echarts-2.2.7.zip压缩包，解压缩后放在
./basic/vendor/bower/echarts-2.2.1/下。

2. 重命名echarts(非必须)。

查看目录./basic/vendor/bower/echarts-2.2.1/下面应该有build,src,doc等文件夹以及bower.json,LICENSE.txt等文件。为方便使用，把文件夹echarts-2.2.1改为echarts。

3. 修改composer.json文件。

vi ./basic/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": "2.2.1"，
变成如下形式。

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

可能上面的这些内容，可以采用composer安装
比如 composer require bower-asset/echarts ""，手机没有流量了，无法测试可行性。*

1-3 安装百度echarts

或者可以替代1-3步骤。使用composer安装。

composer require bower-asset/echarts "*"

因为最新版可能下载比较耗时，可以采用如下方式，下载一个比较老的版本。

composer require bower-asset/echarts "2.2.1"

4. 创建asset bundle类。

在目录./basic/assets/创建EchartsAsset.php文件。内容如下。

/**
 * Write Asset for Echarts.
 */

namespace app\assets;

use yii\web\AssetBundle;

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

内容参照AssetBundle的教程做的。通过查阅echarts的教程，发现一般他们调用的都是./echarts/build/dist/的内容，所以文中设置$sourcePath指向该文件夹。
其中@bower，YII2会自动找到./basic/vendor/bower/文件夹的。
$js是查找./echarts/build/dist/下的js文件，列出来的。
这样完成了AssetBundle的配置。

5. 安装Echarts-PHP插件。

在目录./basic/下输入命令

composer require "hisune/echarts-php"

或者类似的命令或者直接在github下载，
解压缩放在目录./basic/vendor/下。

6. 输出echarts图像。

下面举个简单的例子。
打开site/index.php文件。

vi ./basic/views/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的配置。自己找规律。

最后一行，输出图像。