使用laravel和ECharts实现折线图效果的例子

 更新时间:2019年10月09日 15:42:37   作者:snow_small   我要评论
今天小编就为大家分享一篇使用laravel和ECharts实现折线图效果的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1、首先引入echart.js

<script type="text/javascript" src="{{ asset('/public/js/echarts.js') }}"></script>

2、html页面,要有一个布局容器,用来显示图像,一定要设置宽和高

<div class="contain" style="width: 84%;" id="contain"></div>

3、echarts折线图的使用

var myChart = echarts.init(document.getElementById("contain"));
   option = {
    title : {
     text: '时间变化图' // 标题
    },
    tooltip : {
     trigger: 'axis' // 折线图
    },
    legend: {
     data:['时间'] // 图例,就是折线图上方的符号
    },
    toolbox: { // 工具箱,在折线图右上方的工具条,可以变成别的图像
     show : true,
     feature : {
      mark : {show: true},
      dataView : {show: true, readOnly: false},
      magicType : {show: true, type: ['line', 'bar']},
      restore : {show: true},
      saveAsImage : {show: true}
     }
    },
    calculable : true, // 是否启动拖拽重计算属性,默认false
    xAxis : [ // x坐标轴
     {
      axisLine: { // x坐标轴颜色
       lineStyle: { color: '#333' }
      },
      axisLabel: { // x轴的数据会旋转30度
       rotate: 30,
       interval: 0
      },
      type : 'category',
      boundaryGap : false, // x轴从0开始
      data : [] // x轴数据
     }
    ],
    yAxis : [ // y轴
     {
      type : 'value',
      axisLabel : {
       formatter: '{value} 秒' // y轴的值都加上秒的单位
      },
      axisLine: {
       lineStyle: { color: '#333' }
      }
     }
    ],
    series : [ // 设置图标数据用
     {
      name:'时间', 
      type:'line',
      smooth: 0.3, // 线有弧度
      data: [] // y轴数据
     }
    ]
   };
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option); 

4、实现功能

(1)路由

Route::get('/', 'UserController@index');
Route::post('/axis', 'UserController@axis');

(2)方法

public function index()
 {
  return view('user.index');
 }
// 是ajax所用的的方法,得到要显示的数据,返回数组
public function axis()
 {
  $key = Key::all('name', 'ttl', 'created_time');
  return $key;
 }

(3)当访问/首页时,到index.blade.php

(4)index.blade.php的内容

<div class="contain" style="width: 84%;" id="contain"></div>
 <script type="text/javascript">
  var names = []; // 设置两个变量用来存变量
  var ttls = [];
  var time = Date.parse(new Date()).toString().substr(0, 10); // 获取当前时间,精确到秒,但因为是毫秒级的,会多3个0,变成字符串后去掉
  time = parseInt(time);
  function getData()
  {
   $.post("{{ url('/axis') }}", {
    "_token": "{{ csrf_token() }}"
   }, function(data) {
    $.each(data, function(i, item) {
     names.push(item.name);
     if((ttl = (parseInt(item.ttl) + parseInt(item.created_time) - time)) > 0) { // 小于0就==0,
      ttls.push(ttl);
     } else {
      ttls.push(0);
     }
    });
   });
  }
  getData(); // 一定不能忘了,调用
  // 实现画图的功能
  function chart() {
   var myChart = echarts.init(document.getElementById("contain"));
   option = {
    title : {
     text: '键名过期时间变化图'
    },
    tooltip : {
     trigger: 'axis'
    },
    legend: {
     data:['过期剩余时间']
    },
    toolbox: {
     show : true,
     feature : {
      mark : {show: true},
      dataView : {show: true, readOnly: false},
      magicType : {show: true, type: ['line', 'bar']},
      restore : {show: true},
      saveAsImage : {show: true}
     }
    },
    calculable : true,
    xAxis : [
     {
      axisLine: {
       lineStyle: { color: '#333' }
      },
      axisLabel: {
       rotate: 30,
       interval: 0
      },
      type : 'category',
      boundaryGap : false,
      data : names // x的数据,为上个方法中得到的names
     }
    ],
    yAxis : [
     {
      type : 'value',
      axisLabel : {
       formatter: '{value} 秒'
      },
      axisLine: {
       lineStyle: { color: '#333' }
      }
     }
    ],
    series : [
     {
      name:'过期剩余时间',
      type:'line',
      smooth: 0.3,
      data: ttls // y轴的数据,由上个方法中得到的ttls 
     } 
    ]
   };
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
  }
  setTimeout('chart()', 1000); // 为什么加定时器?因为上面是一起执行的,可能还未取得数据,便已经将图画好了,图上就没有数据,所以这里我延迟了1s,
 </script>

(5)大功告成!!

以上这篇使用laravel和ECharts实现折线图效果的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • Laravel 简单实现Ajax滚动加载示例

    Laravel 简单实现Ajax滚动加载示例

    今天小编就为大家分享一篇Laravel 简单实现Ajax滚动加载示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • PHP源码分析之变量的存储过程分解

    PHP源码分析之变量的存储过程分解

    这篇文章主要介绍了PHP源码分析之变量的存储过程分解,本文针对PHP变量声明后,解释器在背后的一系列动作做了分解,需要的朋友可以参考下
    2014-07-07
  • php导入模块文件分享

    php导入模块文件分享

    本文给大家分享的是php导入模块文件分享,主要参数有导入文件路径字符串,可以用"."代替"/", 导入文件类型的扩展名(带"."号),也可以是class/inc(简写方式), 如果导入成功则返回true,否则返回异常对象,有需要的小伙伴参考下吧。
    2015-03-03
  • php利用事务处理转账问题

    php利用事务处理转账问题

    这篇文章主要介绍了php利用事务处理转账问题的方法,实例分析了php处理事务的提交与回滚的技巧,需要的朋友可以参考下
    2015-04-04
  • thinkphp5框架前后端分离项目实现分页功能的方法分析

    thinkphp5框架前后端分离项目实现分页功能的方法分析

    这篇文章主要介绍了thinkphp5框架前后端分离项目实现分页功能的方法,结合实例形式分析了thinkPHP5前后端分离项目的分页功能常见实现技巧与操作注意事项,需要的朋友可以参考下
    2019-10-10
  • yii去掉必填项中星号的方法

    yii去掉必填项中星号的方法

    这篇文章主要介绍了yii去掉必填项中星号的方法,实例分析了Yii中去除必填项中星号的原理与具体实现技巧,需要的朋友可以参考下
    2015-12-12
  • php实现websocket实时消息推送

    php实现websocket实时消息推送

    这篇文章主要为大家详细介绍了php实现websocket实时消息推送,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-03-03
  • ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法

    ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法

    下面小编就为大家带来一篇ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 关于ThinkPhp 框架表单验证及ajax验证问题

    关于ThinkPhp 框架表单验证及ajax验证问题

    tp数据验证有两种方式,一种是静态方式,一种是动态方式,下面小编给大家带来了ThinkPhp 框架表单验证及ajax验证问题,感兴趣的朋友一起看看吧
    2017-07-07
  • PHP使用FFmpeg获取视频播放总时长与码率等信息

    PHP使用FFmpeg获取视频播放总时长与码率等信息

    这篇文章给大家分享了利用PHP中的FFmpeg读取视频播放时长与码率等信息,有需要的朋友们可以参考借鉴。下面来一起看看吧。
    2016-09-09

最新评论