ECharts, an open source JavaScript implementation visualization library, can smoothly run on the PC and mobile device, much of the current compatible browser (IE8 / 9/10/11 , Chrome, Firefox, Safari , etc.), the underlying pattern dependency vector library ZRender , provides an intuitive, interactive rich, highly personalized custom data visualization charts.
Step One: Download ECharts
You can get ECharts in several ways.
-
From Apache ECharts (incubating) official website to download interface building after obtaining official source packages.
-
In ECharts of GitHub get.
-
By acquiring echarts npm,
npm install echarts --save, see " Use echarts in the webpack " -
By jsDelivr the CDN introducing the like
Step 2: Use ECharts
First of all I would like to get log file which extend in the data:
public function index () { // file_get_contents () function is used to read the contents of the file into a string preferred method // file_get_contents function to read a file into a string. And file () the same, except that file_get_contents () to read the file into a string. Data $ = file_get_contents ( "../extend/as.s803.com.flow.log" ); // segmentation, returns an array $ logs = the explode ( "\ n-", $ Data ); $ the this -> ASSIGN ( " logs ", $ logs ); return $ the this -> FETCH (); }
Then, I will show data on the HTML page:
<!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" > as < INPUT type = "Radio" name = "myNay" value = "0.5" the checked > for half an hour < INPUT type = "Radio" name = "myNay" value = ". 1" > . 1 hours
<! - to prepare a ECharts includes size (width and height) of the DOM -> < div ID = "main" style = "width: 1400px; height: 600px;" > </div> </body> </html>
Acquiring data using JavaScript, by half an hour to obtain an average value (time adjustable length)
<Script>
// data traffic
var Data = {: json_encode ($ logs)};
var outflow = []; // outflow rate
var flow_into = []; // inflow rate var logs_array = []; // final flow data // date stamp transfer
var Thirty = []; // spaced time
var flow_time = [];
var TIME1 = new new a date ( '2014-08-21 00:00:00' ) .getTime ();
// based prepared dom, instance initialization echarts
var myChart = echarts.init (document.getElementById ( 'main' ));
// time stamp transfer date
function timestampToTime (timestamp) {
var DATE = new new a Date (timestamp); // time stamp is required * 10 1000, the timestamp is not required by the case 13 1000
var the Y = the 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 = the parseInt (m)> 10 m: "0" +? m;
var S = DATE. the 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 ]);
}
IF (Classify> 0 ) {
// the partition 30 minutes
for ( var I = 0; I <= 24 / Classify; I ++) {
thirty.push (TIME1 + I * 3600 * 1000 * Classify );
}
// traffic data finally displayed
for ( var0 = I; 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 ])]
});
}
}
// Specifies the data table configurations and
Option = {
title: {
text: 'on August 21, 2014 FIG flow', // title
},
Legend: {
Data: ["Outgoing traffic", "inflow rate '] // illustration shows the assembly of different series of marks, corresponding to the name
},
XAXIS: {
type: ' Time ' ,
SplitLine: {
Show: to false
},
maxInterval: 3600 * 1000 *. 1 , // the partition
min: "2014/08/21 00:00:00", // maximum time
max: "2014/08/22 00:00:00" // minimum time
},
YAXIS: {
type: 'value '
},
symbol:
Series:[
{ "None", // remove the top fold line dot
name: 'outflow rate', // and legend data corresponding to the
data: outflow,
type: 'Line' ,
AreaStyle: {},
},
{
Symbol: "none " // remove the top fold line dot
name: 'inflow rate' ,
Data: flow_into,
type: 'Line' ,
AreaStyle: {}
}
],
dataZoom:[{
of the type: "Inside"
}],
};
// use just the specified configuration items and data charts
myChart.setOption (the Option);
}
logs_fun ();
// Click to switch the chart
$ ( "the INPUT") the Click (. function ( ) {
// Clear data traffic
outflow = [];
flow_into = [];
flow_time = [];
// reloaded
logs_fun ($ ( the this ) .val ());
})
</ Script>
Note: xAxis.type = "time" attribute, then it is best to time format "2014/08/21 00:00:00" (2014-08-21 may be), if it is "2014/08/21 3 : 0: 0 "will not display the chart.
echarts example: https://www.echartsjs.com/examples/zh/index.html
echarts configuration: https://www.echartsjs.com/zh/option.html#title
echarts Tutorial: https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts