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与SQL注入攻击[三]
Apr 17 PHP
PHP自动选择 连接本地还是远程数据库
Dec 02 PHP
php学习笔记之 函数声明(二)
Jun 09 PHP
自己在做项目过程中学到的PHP知识收集
Aug 20 PHP
PHP递归算法的详细示例分析
Feb 19 PHP
浅析php header 跳转
Jun 17 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
Apr 24 PHP
php模拟登陆的实现方法分析
Jan 09 PHP
学习thinkphp5.0验证类使用方法
Nov 16 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
Sep 18 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
Feb 28 PHP
goto语法在PHP中的使用教程
Sep 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
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
详解php的socket通信
2015/08/11 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
广告学专业应届生求职信
2013/10/01 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
金融专业求职信
2014/08/05 职场文书
单位授权委托书范本
2014/09/26 职场文书
庆七一活动简报
2015/07/20 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL