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

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    laravel5.5添加echarts实现画图功能的方法

    一、下载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的数据展示形式,可以根据自己需求在官网查找。

    参考资料

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

    官网教程

    以上这篇laravel5.5添加echarts实现画图功能的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • tp5修改(实现即点即改)
    • PHP+jQuery实现即点即改功能示例
    • jQuery实现checkbox即点即改批量删除及中间遇到的坑
    • JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
    • Laravel+Layer实现图片上传功能(整理篇)
    • Laravel框架实现发送短信验证功能代码
    • laravel框架关于搜索功能的实现
    • laravel框架上传图片实现实时预览功能
    • 使用Laravel中的查询构造器实现增删改查功能
    • Laravel 6 将新增为指定队列任务设置中间件的功能
    • Laravel框架实现即点即改功能的方法分析
    上一篇:使用laravel和ECharts实现折线图效果的例子
    下一篇:laravel实现按月或天或小时统计mysql数据的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    laravel5.5添加echarts实现画图功能的方法 laravel5.5,添加,echarts,实现,