标签:调整 初始化 mes chart 圆点 web tin 获取 minutes
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
你可以通过以下几种方式获取 ECharts。
从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
在 ECharts 的 GitHub 获取。
通过 npm 获取 echarts,npm install echarts --save
,详见“在 webpack 中使用 echarts”
通过 jsDelivr 等 CDN 引入
首先我要获取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 logs_array = [];//最终流量数据//日期转时间戳 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]); } if(classify>0){ //分隔是30分钟 for (var i=0; i<=24/classify; i++){ thirty.push(time1+i*classify*3600*1000); } //最终显示的流量数据 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])] }); } } //指定图表的配置项和数据 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 () { //清空流量数据 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”会不显示图表。
标签:调整 初始化 mes chart 圆点 web tin 获取 minutes
原文地址:https://www.cnblogs.com/bushui/p/12337591.html