【功能点】tp3.2使用ECharts做一个降雨量报表 && tp5的使用实例

往下拉，下边还有个tp5的实例。

1、控制器准备数据，数据是个一维数组

2、模板文件中，为对象加载数据（从文档中挑选各种配置项）

<?php

namespace Home\Controller;

use Think\Controller;

class IndexController extends Controller
{
    public function index()
    {

        $echart = array(
            'title' => '某地区蒸发量和降水量',
            'subtext' => '纯属虚构',
            'legend' => json_encode(['降雨量', '增发量']),
            'a_data'=>json_encode([2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]),
            'b_data'=>json_encode([2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]),
        );
        $this->assign('echart', $echart); //然后直接传到前台去  不一定就是要ajax的 如果用ajax 就在那边闭包处理
        $this->display();
    }
}

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">


    var lengend = {$echart['legend']};      //最上面的图例
    var a_data = {$echart['a_data']};       //蒸发量
    var b_data = {$echart['b_data']};       //降水量
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            var option = {
                title: {
                    text: "{$echart['title']}",         //标题
                    subtext: "{$echart['subtext']}"     //父标题
                },
                tooltip: {
                    trigger: 'axis'                     //触发类型，坐标轴触发，主要在柱状图，折线图
                },
                legend: {                               //图例组件
                    data: (function () {
                        var list = new Array();
                        $.each(lengend, function (k, v) {   //遍历最上面的图例
                            list.push(v);
                        });
                        return list;
                    })()
                },
                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: [        //x轴
                    {
                        type: 'category',       // 类目轴
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'           // 数值轴
                    }
                ],
                series: [                       //Y轴的数据
                    {
                        name: '蒸发量',
                        type: 'bar',            //类型
                        data: (function () {
                            var list = new Array();
                            $.each(a_data, function (k, v) {
                                list.push(v);
                            });
                            return list     //相当于list是data
                        })(),
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: (function () {
                            var list = new Array();
                            $.each(b_data, function (k, v) {
                                list.push(v);
                            });
                            return list
                        })(),
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };


            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    );
</script>
</body>

tp5的实例

<a href="{:url('Stock/qrcode',array('id'=>$vo['id']))}"> <!--往控制器方法，带参数的发请求-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>销售</title>
    <script src="__STATIC__/js/jquery.js"></script>
    <script src="__STATIC__/js/echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="__STATIC__/js/layui/css/layui.css"  media="all">
    <style>
        .h{
            height:20px;
        }
    </style>
</head>
<body>

<div class="h"></div>


<div>
    开始时间：<input type="date" value="{$start_time}" name="start_time" class="s_time"/>
    结束时间：<input type="date" value="{$end_time}" name="end_time" class="e_time"/>
    <button type="button" class="layui-btn  layui-btn-small layui-btn-normal" id="sou">搜索</button>
</div>

<div class="h"></div>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));



    $("#sou").click(function() {
        //接收时间
        var s_time = $('.s_time').val();     //开始时间
        var e_time = $('.e_time').val();     //结束时间

        //
        $.ajax({
            url: "{:url('sellDataPost')}",  //本控制器的方法
            type : "post",
            datatype: "json",
            data : {start_time:s_time,end_time:e_time},   //时间带过去
            success: function(data){ //成功的回调函数，可以根据需要做对应的弹窗提示
                var d_obj = JSON.parse(data);       //可以将json字符串转换成json对象

                //x轴的数据
                var xobj = d_obj.goods;
                var xstr = xobj.split("|");     //分隔字符串
                var xdata = [];
                for (var i=0;i<xstr.length;i++){
                    xdata.push(xstr[i]);        //将字符串追加到数组
                    //alert(a[i]);
                }

                //y轴的数据
                var yobj = d_obj.num;
                var ystr = yobj.split("|");
                var ydata = [];
                for(var e=0;e<ystr.length;e++){
                    ydata.push(ystr[e]);
                }


                myChart.setOption({
                    title: {
                        text: '通驰店铺销售记录'
                    },
                    tooltip: {},
                    legend: {
                        data:['金额']
                    },
                    xAxis: {    //销售种类
                        data:xdata
                    },
                    yAxis: {
                    },
                    series: [{
                        name: '金额',
                        type: 'bar',
//                        data: [     //销售金额
//                            d_obj.num
//                        ]
                        data:ydata,
                    }]
                });
            }
        });

    });


</script>


</body>
</html>

//控制器代碼：通过ajax返回数据
public function sellDataPost(){

    //取Y轴数据 销售额 == 价格*数量。使用sum统计销售总额
    $data = input('post.');
    //o($data);
    $model = new SellModel();
    $res = $model->selectDataY($data);  //查數據
    $moneys = [];
    foreach ($res as $k => $value){
        $moneys[] = $value['sell_sum'];
    }
    //o($moneys);
    $money = implode("|",$moneys);

    //取x轴的数据 销售的品类，取name
    $info = Db::table('cmf_ws_sell')
        ->alias('s')
        ->join('cmf_ws_category c','s.category_id = c.id')
        ->where('c.parent_id',0)    //查category表parent_id为0的一级分类
        ->field('c.name')           //只查询需要取出的分类名
        ->group('s.category_id')    //统计category_id 去重
        ->select();
    //echo Db::table('cmf_ws_sell')->getLastSql();      //打印sql語句
    $category_names = [];    //2维变1维
    foreach ($info as $key => $value){
        $category_names[] = $value['name'];
    }

    $category_name = implode("|",$category_names);  //转换成字符串


    //返回ajax  品类            销售额
    $json  = ['goods'=>$category_name,'num'=>$money];
    echo json_encode($json);
}

【功能点】tp3.2使用ECharts做一个降雨量报表 && tp5的使用实例

tp5的实例

相关推荐