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頁面上：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入 echarts.js --> <script src="__PUBLIC__/js/echarts.min.js"></script> <script src="__PUBLIC__/js/jquery-1.11.3.js"></script> </head> <body> <input type="radio" name="myNay" value="0">原樣 <input type="radio" name="myNay" value="0.5" checked>半小時 <input type="radio" name="myNay" value="1">1小時
<!-- 為 ECharts 准備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 1400px;height:600px;"></div> </body> </html>
使用JavaScript獲取數據，按半小時來得到平均值（時間長度可調整）
<script>
//流量的數據
var data = {:json_encode($logs)};
var outflow = [];//流出流量
var flow_into = [];//流入流量
var outflow_data = [];
var flow_into_data = [];
var san_array = [];
var logs_array = [];//最終流量數據
//平均值
var outflow_avg = [];
var flow_into_avg = [];
//日期轉時間戳
var thirty = []; //分隔的時間
var flow_time = [];
var time1 = new Date('2014-08-21 00:00:00').getTime();
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
//時間戳轉日期
function timestampToTime(timestamp) {
var date = new Date(timestamp);//時間戳為10位需*1000，時間戳為13位的話不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = date.getDate() + ' ';
var h = date.getHours() + ':';
var m = date.getMinutes() + ':';
m = parseInt(m)>10 ? m : "0"+m;
var s = date.getSeconds()+"0";
return Y + M + D + h + m + s;
}
function logs_fun(classify=0.5) {
//日期
for (var i=0; i<data.length; i++){
flow_time.push([new Date('2014-08-21 '+data[i][0]).getTime(),data[i][1],data[i][2]])
if(classify==0){
outflow.push({
name:'2014-08-21 '+data[i][0],
value:['2014-08-21 '+data[i][0], data[i][1]]
});
flow_into.push({
name:'2014-08-21 '+data[i][0],
value:['2014-08-21 '+data[i][0], data[i][2]]
});
}
outflow_data.push(data[i][1]);
flow_into_data.push(data[i][2]);
outflow_avg=+parseInt(data[i][1]);
flow_into_avg=+parseInt(data[i][2]);
}
if(classify>0){
//分隔是30分鍾
for (var i=0; i<=24/classify; i++){
thirty.push(time1+i*classify*3600*1000);
}
for(var i=0; i<thirty.length; i++){
san_array[i]=[];
for (var j=0; j<flow_time.length; j++){
if(thirty[i]-flow_time[j][0] >=0) {
san_array[i][j]=flow_time[j];
}
else {
flow_time.splice(0,j);
break;
}
}
}
for (var i=0; i<san_array.length; i++){
var lc=0;
var lr=0;
var count_log = classify<1 ? 30 : 60;
for (var j=0; j<san_array[i].length; j++) {
lc+=parseInt(san_array[i][j][1]);
lr+=parseInt(san_array[i][j][2]);
}
var lc_now = isNaN(lc/count_log) ? 0 : lc/count_log;
var lr_now = isNaN(lr/count_log) ? 0 : lr/count_log;
logs_array[i] = [timestampToTime(thirty[i]),lc_now,lr_now];
}
//最終顯示的流量數據
for (var i=0; i<logs_array.length; i++){
outflow.push({
name:logs_array[i][0],
value:[logs_array[i][0], ""+Math.round(logs_array[i][1])]
});
flow_into.push({
name:logs_array[i][0],
value:[logs_array[i][0], ""+Math.round(logs_array[i][2])]
});
}
}
document.getElementById("liuchu_max").innerHTML=Math.max(...outflow_data);//流出流量最大值
document.getElementById("liuru_max").innerHTML=Math.max(...flow_into_data);//流入流量最大值
document.getElementById("liuchu_min").innerHTML=Math.min(...outflow_data);//流出流量最小值
document.getElementById("liuru_min").innerHTML=Math.min(...flow_into_data);//流入流量最小值
document.getElementById("liuchu_last").innerHTML=outflow_data.pop();//流出流量最后值
document.getElementById("liuru_last").innerHTML=flow_into_data.pop();//流出流量最后值
document.getElementById("liuchu_avg").innerHTML=(outflow_avg / outflow_data.length).toFixed(2);//流出流量平均值
document.getElementById("liuru_avg").innerHTML=(flow_into_avg / flow_into_data.length).toFixed(2);//流出流量平均值
//指定圖表的配置項和數據
option = {
title: {
text: '2014年8月21號流量圖', //標題
},
legend: {
data: ['流出流量', '流入流量'] //圖例組件展現了不同系列的標記，與name對應
},
xAxis: {
type: 'time',
splitLine: {
show: false
},
maxInterval: 3600 * 1 * 1000, //分隔
min:"2014/08/21 00:00:00", //最大時間
max:"2014/08/22 00:00:00" //最小時間
},
yAxis: {
type: 'value'
},
series: [
{
symbol:"none", //去掉折線上面的小圓點
name: '流出流量', //與legend的data對應
data: outflow,
type: 'line',
areaStyle: {},
},
{
symbol:"none", //去掉折線上面的小圓點
name: '流入流量',
data: flow_into,
type: 'line',
areaStyle: {}
}
],
dataZoom:[{
type:"inside"
}],
};
//使用剛指定的配置項和數據顯示圖表
myChart.setOption(option);
}
logs_fun();
//點擊切換圖表
$("input").click(function () {
//清空流量數據
thirty = [];
san_array = [];
logs_array = [];
outflow = [];
flow_into = [];
flow_time = [];
//重新加載
logs_fun($(this).val());
})
</script>
注意：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...)