ThinkPHP中使用echarts

2021-06-04 22:04

阅读:626

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

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

第一步:下载 ECharts

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

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

  • 在 ECharts 的 GitHub 获取。

  • 通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts”

  • 通过 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>Titletitle>
    
    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小时
div id="main" style="width: 1400px;height:600px;">div> body> html>

使用JavaScript获取数据,按半小时来得到平均值(时间长度可调整)

注意: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


评论


亲,登录后才可以留言!