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 heredoc和phpwind的模板技术使用方法小结
Mar 28 PHP
php escape URL编码
Dec 10 PHP
PHP 分页类(模仿google)-面试题目解答
Sep 13 PHP
php旋转图片90度的方法
Nov 07 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
Nov 26 PHP
ThinkPHP独立分组使用的注意事项
Nov 25 PHP
Yii入门教程之目录结构、入口文件及路由设置
Nov 25 PHP
php随机生成数字字母组合的方法
Mar 18 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
Sep 09 PHP
yii 2.0中表单小部件的使用方法示例
May 23 PHP
laravel框架的安装与路由实例分析
Oct 11 PHP
php实现根据身份证获取精准年龄
Feb 26 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备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
静态的动态续篇之来点XML
2006/12/23 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
python实现rsa加密实例详解
2017/07/19 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
投标文件签署授权委托书范本
2014/10/12 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python