ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

第一步：下载 ECharts

你可以通过以下几种方式获取 ECharts。

1、从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。

2、在 ECharts 的 GitHub 获取

下载完之后我们把dist改成echats，放在plugins下面

3、通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

4、通过 jsDelivr 等 CDN 引入

第二步：使用 ECharts

首先我要获取extend里的日志文件里面的数据：

public function index()

{

//file_get_contents() 函数是用于将文件的内容读入到一个字符串中的首选方法

//file_get_contents函数把整个文件读入一个字符串中。和 file() 一样，不同的是 file_get_contents() 把文件读入一个字符串。

$data = file_get_contents("../extend/as.s803.com.flow.log");

//分割，返回数组

$logs = explode("\n",$data);

$this->assign("logs",$logs);

return $this->fetch();

}

接着，我就将数据展示HTML页面上：

原样

半小时

1小时

使用JavaScript获取数据，按半小时来得到平均值（时间长度可调整）

注意：xAxis.type="time"属性的话，它的时间格式最好是“2014/08/21 00:00:00”（2014-08-21也可以），如果是“2014/08/21 3:0:0”会不显示图表。

想要更换图表，点击"echarts实例"查看代码；点击“echarts配置”查看参数配置；点击“echarts教程”查看入门教程

echarts实例：https://www.echartsjs.com/examples/zh/index.html

echarts配置：https://www.echartsjs.com/zh/option.html#title

echarts教程：https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

echarts - 使用echarts过程中遇到的问题(pending...)