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


Posted in PHP onOctober 09, 2019

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实现折线图效果的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
Email+URL的判断和自动转换函数
Oct 09 PHP
php session 检测和注销
Mar 16 PHP
PHP 图片上传实现代码 带详细注释
Apr 29 PHP
php中神奇的fastcgi_finish_request
May 02 PHP
php设计模式 Adapter(适配器模式)
Jun 26 PHP
PHP 防注入函数(格式化数据)
Aug 08 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
Jan 27 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
Aug 31 PHP
php ckeditor上传图片文件名乱码解决方法
Nov 15 PHP
php+ajax制作无刷新留言板
Oct 27 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
Oct 21 PHP
PHP引擎php.ini参数优化深入讲解
Mar 24 PHP
Laravel统计一段时间间隔的数据方法
Oct 09 #PHP
浅谈PHP5.6 与 PHP7.0 区别
Oct 09 #PHP
laravel按天、按小时,查询数据的实例
Oct 09 #PHP
laravel多条件查询方法(and,or嵌套查询)
Oct 09 #PHP
Laravel find in set排序实例
Oct 09 #PHP
对laravel in 查询的使用方法详解
Oct 09 #PHP
laravel实现查询最后执行的一条sql语句的方法
Oct 09 #PHP
You might like
PHP strtok()函数的优点分析
2010/03/02 PHP
php实现文件下载实例分享
2014/06/02 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
javascript函数库-集合框架
2007/04/27 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
python 实现敏感词过滤的方法
2019/01/21 Python
python函数的万能参数传参详解
2019/07/26 Python
django中使用POST方法获取POST数据
2019/08/20 Python
selenium如何定位span元素的实现
2021/01/13 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
旅游管理专业大学生职业规划书
2014/02/27 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2014年老干部工作总结
2014/11/21 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python