您的位置:首页 > 编程学习 > > 正文

echart图表有哪些(使用laravel和ECharts实现折线图效果的例子)

更多 时间:2021-10-11 00:28:24 类别:编程学习 浏览量:2841

echart图表有哪些

使用laravel和ECharts实现折线图效果的例子

1、首先引入echart.js

  • ?
  • 1
  • <script type="text/javascript" src="{{ asset('/public/js/echarts.js') }}"></script>
  • 2、html页面,要有一个布局容器,用来显示图像,一定要设置宽和高

  • ?
  • 1
  • <li class="contain" style="width: 84%;" id="contain"></li>
  • 3、echarts折线图的使用

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 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)路由

  • ?
  • 1
  • 2
  • Route::get('/', 'UserController@index');
  • Route::post('/axis', 'UserController@axis');
  • (2)方法

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 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的内容

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • <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

    您可能感兴趣