php echarts框架,yii2加入百度echarts的一般步骤

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

参考这里。

对于联网的网站，可以采用上述网址里的做法。下面叙述对无法联网的或者想把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

加入如下内容

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的配置。自己找规律。

最后一行，输出图像。