Laravel 调用 jQuery echarts 图表

laravel 调用jquery echarts图表插件

引入echarts.js文件 (下载链接: https://echarts.baidu.com/download.html)

<script type="text/javascript" src="/js/echarts.js"></script>

引入script

<script>
    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: '#6ccfff' }
                },
                axisLabel: {   // x轴的数据会旋转30度
                    rotate: 10,
                    interval: 0
                },
                type : 'category',
                boundaryGap : false,   // x轴从0开始
                data : []   // x轴数据()
            }
        ],
        //纵轴
        yAxis : [   // y轴
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} 年'   // y轴的值都加上秒的单位
                },
                axisLine: {
                    lineStyle: { color: '#6ccfff' }
                }
            }
        ],
        series : [    // 设置图标数据用
            {
                name:'时间',
                type:'line',
                smooth: 0.3,   // 线有弧度
                data: []   // y轴数据
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

编写blade模板

  <section class="content" style="margin-left: 50px;">
        <div class="tab-content">
            <div class="contain" style="width: 600px;height: 400px;" id="contain"></div>
            <div class="contain" style="width: 90%;" id="contain"></div>
        </div>
    </section>
<script src="/js/app.js"></script>
<script type="text/javascript">

    var names = [];   // 设置两个变量用来存变量
    var emails = [];
    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);
                created_at =parseFloat(item.created_at);
                updated_at =parseFloat(item.updated_at);

                emails.push(updated_at-created_at);

            });
        });
    }
    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},
                    myTool2: {
                        show: true,
                        title: '转化为扇形',
                        option :{
                            angleAxis: {
                                type: 'category',
                                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                                z: 10
                            },
                            radiusAxis: {
                            },
                            polar: {
                            },
                            series: [{
                                type: 'bar',
                                data: [1, 2, 3, 4, 3, 5, 1],
                                coordinateSystem: 'polar',
                                name: 'A',
                                stack: 'a'
                            }, {
                                type: 'bar',
                                data: [2, 4, 6, 1, 3, 2, 1],
                                coordinateSystem: 'polar',
                                name: 'B',
                                stack: 'a'
                            }, {
                                type: 'bar',
                                data: [1, 2, 3, 4, 1, 2, 5],
                                coordinateSystem: 'polar',
                                name: 'C',
                                stack: 'a'
                            }],
                            legend: {
                                show: true,
                                data: ['A', 'B', 'C']
                            }
                        },
                        icon: 'image://http://echarts.baidu.com/images/favicon.png',
                        onclick: function (){
                            alert('尽情期待')
                        }
                    }

                }
            },
            calculable : true,
            xAxis : [
                {
                    axisLine: {
                        lineStyle: { color: '#6ccfff' }
                    },
                    axisLabel: {
                        rotate: 30,
                        interval: 0
                    },
                    type : 'category',
                    boundaryGap : false,
                    data : names    // x的数据，为上个方法中得到的names
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLine: {
                        lineStyle: { color: '#6ccfff' }
                    }
                }
            ],
            series : [
                {
                    name:'有效时长',
                    type:'line',
                    smooth: 0.3,
                    data: emails   // y轴的数据，由上个方法中得到的emails
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    setTimeout('chart()', 1000);   // 为什么加定时器？因为上面是一起执行的，可能还未取得数据，便已经将图画好了，图上就没有数据，所以这里我延迟了1s，
</script>

定义路由

Route::get('/', 'CunliangController@test2');
Route::post('/axis', 'CunliangController@odata');

控制器操作

  public function test2()
    {

        return view('cunliang.cunliang');
    }
    public function odata(Request $request)
    {
        if ($request->isMethod('post')){
            //返回用户表信息
            $key = \App\User::all('name', 'created_at', 'updated_at');

            return $key;
        }

    }

本作品采用《CC 协议》，转载必须注明作者和本文链接