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语法(4)
Oct 09 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
Jan 07 PHP
PHP通用检测函数集合
Feb 08 PHP
10 个经典PHP函数
Oct 17 PHP
ThinkPHP调用百度翻译类实现在线翻译
Jun 26 PHP
PHP反射使用实例和PHP反射API的中文说明
Jul 02 PHP
phpExcel中文帮助手册之常用功能指南
Aug 18 PHP
php实现网站顶踩功能的完整前端代码
Jul 19 PHP
PHP学习笔记之php文件操作
Jun 03 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
Sep 17 PHP
PHP+MySQL实现消息队列的方法分析
May 09 PHP
PHP数组基本用法与知识点总结
Jun 02 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python enumerate函数的使用方法总结
2017/11/15 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年党务工作总结
2014/11/25 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
百家讲坛观后感
2015/06/12 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang