• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    使用laravel和ECharts实现折线图效果的例子

    1、首先引入echart.js

    script type="text/javascript" src="{{ asset('/public/js/echarts.js') }}">/script>

    2、html页面,要有一个布局容器,用来显示图像,一定要设置宽和高

    div class="contain" style="width: 84%;" id="contain">/div>

    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的内容

    div class="contain" style="width: 84%;" id="contain">/div>
     
     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实现折线图效果的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • 微信小程序使用echarts获取数据并生成折线图
    • Layer+Echarts构建弹出层折线图的方法
    • echarts多条折线图动态分层的实现方法
    • Echarts动态加载多条折线图的实现代码
    • 基于mpvue小程序使用echarts画折线图的方法示例
    • vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
    • Echarts教程之通过Ajax实现动态加载折线图的方法
    • jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
    • jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
    • jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
    • echarts实现折线图的拖拽效果
    上一篇:Laravel统计一段时间间隔的数据方法
    下一篇:laravel5.5添加echarts实现画图功能的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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