laravel5.5添加echarts实现画图功能的方法


Posted in PHP onOctober 09, 2019

一、下载echarts

我用的是3.X版本,下载地址

二、在页面中引入echarts

<script type="text/javascript" src="/js/echarts.min.js"></script>

我把下载下来的echarts.min.js放在了public/js/目录下

三、通过post的请求获取数据并在页面展示

1.添加路由

Route::get('/test2', 'CunliangController@test2')->name('test2');

Route::post('/odata', 'CunliangController@odata');

/test2用来展示echarts的界面,/odata获取数据。

2.控制器添加代码

public function test2()
{
 return view('cunliang.test2');
}
public function odata()
{
 //返回最近七天的数据
 $data = Cunliang::where("file_type", "O")->latest()
     ->take(7)
     ->get();

 return array_reverse($data->toArray(),false);

}

3.页面blade模板添加

<div id="contain" style="width: 950px;height:400px;"></div>

4.添加js

<script type="text/javascript">
 var names = [];
 var ttls = [];
 function getData()
 {
  $.post("{{ url('/odata') }}", {
   "_token": "{{ csrf_token() }}"
  }, function(data) {
   $.each(data, function(i, item) {
    names.push(item.update_date);
    ttls.push(item.space_size);
   });
  });
 }
 getData();
 function chart() {
  var myChart = echarts.init(document.getElementById("contain"));


  option = {
   title : {
    text: 'O域数据最近7天更新情况'
   },
   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} M'
     },
     axisLine: {
      lineStyle: { color: '#333' }
     }
    }
   ],
   series : [
    {
     name:'数据大小',
     type:'line',
     smooth: 0.3,
     data: ttls // y轴的数据,由上个方法中得到的ttls
    }
   ]
 };
 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
 }
 setTimeout('chart()', 1000);
</script>

其中getdata通过post得到的数据为echart准备数据,function chart()为echart的数据展示形式,可以根据自己需求在官网查找。

参考资料

官网教程

以上这篇laravel5.5添加echarts实现画图功能的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
Mar 28 PHP
php strstr查找字符串中是否包含某些字符的查找函数
Jun 03 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
Sep 12 PHP
php中的注释、变量、数组、常量、函数应用介绍
Nov 16 PHP
PHP在线生成二维码(google api)的实现代码详解
Jun 04 PHP
php 强制下载文件实现代码
Oct 28 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
Feb 24 PHP
Linux下PHP加速器APC的安装与配置笔记
Oct 24 PHP
php定义参数数量可变的函数用法实例
Mar 16 PHP
php array_key_exists() 与 isset() 的区别
Oct 24 PHP
浅谈PHP发送HTTP请求的几种方式
Jul 25 PHP
PHP实现求解最长公共子串问题的方法
Nov 17 PHP
使用laravel和ECharts实现折线图效果的例子
Oct 09 #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
You might like
ThinkPHP的L方法使用简介
2014/06/18 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
React实现轮播效果
2020/08/25 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
英国钻石公司:British Diamond Company
2020/02/16 全球购物
大门门卫岗位职责
2013/11/30 职场文书
初中体育教学反思
2014/01/14 职场文书
计算机个人求职信范例
2014/01/24 职场文书
小学国庆节活动方案
2014/02/11 职场文书
工会趣味活动方案
2014/08/18 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python