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 相关文章推荐
PHP中Date获取时间不正确怎么办
Jun 05 PHP
php 记录进行累加并显示总时长为秒的结果
Nov 04 PHP
PHP基础之运算符的使用方法
Apr 28 PHP
探讨fckeditor在Php中的配置详解
Jun 08 PHP
PHP IE中下载附件问题解决方法
Jan 07 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
Apr 19 PHP
php面向对象与面向过程两种方法给图片添加文字水印
Aug 26 PHP
详解YII关联查询
Jan 10 PHP
PHP 访问数据库配置通用方法(json)
May 20 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
Jun 13 PHP
php中的explode()函数实例介绍
Jan 18 PHP
laravel高级的Join语法详解以及使用Join多个条件
Oct 16 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
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP的引用详解
2015/02/22 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
python远程登录代码
2008/04/29 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
python递归下载文件夹下所有文件
2019/08/31 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
代办委托书怎样写
2014/04/08 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
农村文化建设标语
2014/10/07 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
新员工入职欢迎词
2015/01/23 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书