码迷,mamicode.com
首页 > Web开发 > 详细

ThinkPHP中使用echarts

时间:2020-02-20 21:50:51      阅读:332      评论:0      收藏:0      [点我收藏+]

标签:调整   初始化   mes   chart   圆点   web   tin   获取   minutes   

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

第一步:下载 ECharts

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

第二步:使用 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 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”会不显示图表。

 

ThinkPHP中使用echarts

标签:调整   初始化   mes   chart   圆点   web   tin   获取   minutes   

原文地址:https://www.cnblogs.com/bushui/p/12337591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!