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

来源:脚本之家  责任编辑:小易  

ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手。它由Facebook创建,并在2013年首次发布。Facebook认为React在处理SPA问题上可以成为Angular的替代品,因此如果你认为Angular和React这两种框架是竞争对手,那你的理解就对了。不过,与Angular相比,React最大的不同之处在于,它是一个更高效、具有更高性能、速度更快的类库。下图展示了使用React、Angular、Knockout(另一种类版库,在本文中不做讨论),以及纯粹的JavaScript在DOM中渲染包含1000个内容的列表,各自权所需的时间:来源:The Dapper Developer如果你的应用非常看重性能,那么React就是正确的选择。也因此,在今年的2015 AngularJS研讨会也有提及,两者可以互相结合,让整个网页性能更提升一步www.zgxue.com防采集请勿采集本网。

1、首先引入echart.js

参考: php namespace App\\Http\\Controllers;use Validator;use Illuminate\\Http\\Request;use App\\Http\\Controllers\\Controller;class PostController extends Controller { Store a new blog

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

/验证规则 如果是修改可以重复 否则不能重复 if(isset($data['id'])){ id=$data['id']?data['id']:'null';}else{ id='null';} rules= 'title'=>'required|max:16|min:2|unique:helps,title,'.$id.

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

不想用是因为不顺手吧, 或是不适合自己用。不想用就不要用啦,也不要纠结, 对身心健康没有益处。

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

从官网上看,laravel 从 4.2 版本开始对查询结果的排序使用的就已经是 orderBy;至于 4.2 之前的版本,官网现在也没开放下载了,找不到资源;不过根据向后兼容的原则,laravel 框架每一次的更新

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

在 composer.json 文件中加入 "guzzlehttp/guzzle": "^6.2" ,参考:然后运行:composer update内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 微信小程序使用echarts获取数据并生成折线图
  • layer+echarts构建弹出层折线图的方法
  • echarts多条折线图动态分层的实现方法
  • echarts动态加载多条折线图的实现代码
  • 基于mpvue小程序使用echarts画折线图的方法示例
  • vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
  • echarts教程之通过ajax实现动态加载折线图的方法
  • jquery插件echarts实现的单折线图效果示例【附demo源码下载】
  • jquery插件echarts实现的多折线图效果示例【附demo源码下载】
  • jquery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
  • echarts实现折线图的拖拽效果
  • php使用activemq实例
  • 前端必学之php语法基础
  • php判断数组是否为空的实例方法
  • laravel 使用查询构造器配合原生sql语句查询的例子
  • 基于thinkphp3.2实现微信接入及查询token值的方法
  • 如何正确配置nginx + php
  • php中的streams详细介绍
  • tp5(thinkphp5)框架连接数据库的方法示例
  • php 图片文件上传实现代码
  • php实现无限级分类
  • laravel 怎么使用guzzlehttp/guzzle
  • ReactJS怎么和Laravel结合开发使用
  • 在laravel中有必要使用vue吗
  • laravel 为什么要大量使用env而不是普遍用的常量定义的方式
  • 如何使用 Laravel 框架的 validator
  • 如何使用 Laravel 框架的 validator
  • 为什么我不太想用 Laravel
  • laravel 是从哪个版本开始 order()不能用了
  • 为什么我不太想用 Laravel
  • 如何在laravel中使用chromephp
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全php基础php技巧php实例php文摘php模板首页php编程微信小程序使用echarts获取数据并生成折线图layer+echarts构建弹出层折线图的方法echarts多条折线图动态分层的实现方法echarts动态加载多条折线图的实现代码基于mpvue小程序使用echarts画折线图的方法示例vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)echarts教程之通过ajax实现动态加载折线图的方法jquery插件echarts实现的单折线图效果示例【附demo源码下载】jquery插件echarts实现的多折线图效果示例【附demo源码下载】jquery插件echarts设置折线图中折线线条颜色和折线点颜色的方法echarts实现折线图的拖拽效果php使用activemq实例前端必学之php语法基础php判断数组是否为空的实例方法laravel 使用查询构造器配合原生sql语句查询的例子基于thinkphp3.2实现微信接入及查询token值的方法如何正确配置nginx + phpphp中的streams详细介绍tp5(thinkphp5)框架连接数据库的方法示例php 图片文件上传实现代码php实现无限级分类php获取数组长度的方法(有实例)微信公众平台实现获取用户openid教你如何使用php session使用php生成二维码的两种方法(带php发送get、post请求的6种方法简php中把stdclass object转array的微信公众平台网页授权获取用户基laravel框架数据库curd操作、连贯php删除数组中空值的方法介绍php从数组中删除元素的四种方法实php中url函数介绍及使用示例php如何使用memcachedphp实现12306余票查询、价格查询示例分享下页面关键字抓取components.arrow.cthinkphp多语言支持与多模板支持概述基于laravel(5.4版本)的基本增删改查操作php技术实现加载字体并保存成图片mysql查找删除重复数据并只保留一条实例详phpcms2008广告模板sql注入漏洞修复php生成图片验证码-附五种验证码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved