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 相关文章推荐
[FAQ]PHP中的一些常识:类篇
Oct 09 PHP
如何删除多级目录
Oct 09 PHP
第四节--构造函数和析构函数
Nov 16 PHP
PHP下操作Linux消息队列完成进程间通信的方法
Jul 24 PHP
PHP文件注释标记及规范小结
Apr 01 PHP
php面向对象中的魔术方法中文说明
Mar 04 PHP
分享一段php获取linux服务器状态的代码
May 27 PHP
50个PHP程序性能优化的方法
Jun 02 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
May 12 PHP
Laravel核心解读之异常处理的实践过程
Feb 24 PHP
PHP利用百度ai实现文本和图片审核
May 08 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
Jun 25 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
咖啡的种类和口感
2021/03/03 新手入门
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
详解express + mock让前后台并行开发
2018/06/06 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python时间获取及转换知识汇总
2017/01/11 Python
python生成二维码的实例详解
2017/10/29 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python处理PDF与CDF实例
2020/02/26 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
详解python程序中的多任务
2020/09/16 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
文化建设工作方案
2014/05/12 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
肖申克救赎观后感
2015/06/02 职场文书
英雄儿女观后感
2015/06/09 职场文书
学子宴致辞大全
2015/07/27 职场文书
老人院义工活动感想
2015/08/07 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
Android中的Launch Mode详情
2022/06/05 Java/Android