echart图表有哪些(使用laravel和ECharts实现折线图效果的例子)
类别:编程学习 浏览量:2841
时间:2021-10-11 00:28:24 echart图表有哪些
使用laravel和ECharts实现折线图效果的例子1、首先引入echart.js
|
<script type= "text/javascript" src= "{{ asset('/public/js/echarts.js') }}" ></script> |
2、html页面,要有一个布局容器,用来显示图像,一定要设置宽和高
|
< li class = "contain" style = "width: 84%;" id = "contain" ></ li > |
3、echarts折线图的使用
|
var myChart = echarts.init(document.getElementById( "contain" )); option = { title : { text: '时间变化图' // 标题 }, 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, // 是否启动拖拽重计算属性,默认false xAxis : [ // x坐标轴 { axisLine: { // x坐标轴颜色 lineStyle: { color: '#333' } }, axisLabel: { // x轴的数据会旋转30度 rotate: 30, interval: 0 }, type : 'category' , boundaryGap : false, // x轴从0开始 data : [] // x轴数据 } ], yAxis : [ // y轴 { type : 'value' , axisLabel : { formatter: '{value} 秒' // y轴的值都加上秒的单位 }, axisLine: { lineStyle: { color: '#333' } } } ], series : [ // 设置图标数据用 { name: '时间' , type: 'line' , smooth: 0.3, // 线有弧度 data: [] // y轴数据 } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); |
4、实现功能
(1)路由
|
Route::get( '/' , 'UserController@index' ); Route::post( '/axis' , 'UserController@axis' ); |
(2)方法
|
public function index() { return view( 'user.index' ); } // 是ajax所用的的方法,得到要显示的数据,返回数组 public function axis() { $key = Key::all( 'name' , 'ttl' , 'created_time' ); return $key ; } |
(3)当访问/首页时,到index.blade.php
(4)index.blade.php的内容
|
<li class = "contain" style= "width: 84%;" id= "contain" ></li> <script type= "text/javascript" > var names = []; // 设置两个变量用来存变量 var ttls = []; var time = Date .parse( new Date ()).toString(). substr (0, 10); // 获取当前时间,精确到秒,但因为是毫秒级的,会多3个0,变成字符串后去掉 time = parseInt(time); function getData() { $.post( "{{ url('/axis') }}" , { "_token" : "{{ csrf_token() }}" }, function (data) { $.each(data, function (i, item) { names.push(item.name); if ((ttl = (parseInt(item.ttl) + parseInt(item.created_time) - time)) > 0) { // 小于0就==0, ttls.push(ttl); } else { ttls.push(0); } }); }); } getData(); // 一定不能忘了,调用 // 实现画图的功能 function chart() { var myChart = echarts.init(document.getElementById( "contain" )); option = { title : { text: '键名过期时间变化图' }, 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} 秒' }, axisLine: { lineStyle: { color: '#333' } } } ], series : [ { name: '过期剩余时间' , type: 'line' , smooth: 0.3, data: ttls // y轴的数据,由上个方法中得到的ttls } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } setTimeout( 'chart()' , 1000); // 为什么加定时器?因为上面是一起执行的,可能还未取得数据,便已经将图画好了,图上就没有数据,所以这里我延迟了1s, </script> |
(5)大功告成!!
以上这篇使用laravel和ECharts实现折线图效果的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持开心学习网。
原文链接:https://blog.csdn.net/snow_small/article/details/78853594
您可能感兴趣
- 怎么删掉laravel(laravel-admin的图片删除实例)
- laravel服务器设置教程(laravel框架模型、视图与控制器简单操作示例)
- laravel前后端分离模块化(laravel 实现划分admin和home 模块分组)
- laravel队列不超时(在laravel中实现事务回滚的方法)
- laravel 表单验证图片(Laravel 自动生成验证的实例讲解:login / logout)
- laravel权限控制(laravel-admin 在列表页添加自定义按钮的例子)
- laravel数据迁移(Laravel框架实现的上传图片到七牛功能详解)
- laravel api 调试(laravel 实现设置时区的简单方法)
- laravel新增数据表(laravel实现上传图片的两种方式小结)
- laravel线上如何调试(解决Laravel 不能创建 migration 的问题)
- laravel5.1获取数据(laravel5表单唯一验证的实例代码)
- laravel定时脚本(laravel实现按时间日期进行分组统计方法示例)
- laravel如何使用预处理(Laravel项目中timeAgo字段语言转换的改善方法示例)
- laravel多线程处理请求(Laravel 6 将新增为指定队列任务设置中间件的功能)
- laravel在中间件内生成参数并且传递到控制器中的2种姿势(laravel在中间件内生成参数并且传递到控制器中的2种姿势)
- laravel数据库配置(Laravel如何同时连接多个数据库详解)
- ()
- SCI检索 SSCI检索 EI检索 ISTP检索 CSCD检索简介(SCI检索SSCI检索EI检索)
- 参考文献里期刊名称的写法,你知道吗(参考文献里期刊名称的写法)
- 硕博期刊 SCI SSCI CSSCI分不清 一文带你看懂主流期刊分类(硕博期刊SCISSCI)
- 辱华品牌新百伦官宣新代言人IU,个别粉丝希望get爱豆同款(辱华品牌新百伦官宣新代言人IU)
- 巅峰时期被爆床照,曾被选国民最讨厌女星,IU不为人知的黑历史(巅峰时期被爆床照)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9