Echarts+ThinkPHP5.0实现统计图表(亲测,超详细)

最新推荐文章于 2021-07-22 10:32:45 发布

别惹轩轩

最新推荐文章于 2021-07-22 10:32:45 发布

阅读量2.3k

点赞数 4

分类专栏： ThinkPHP PHP 文章标签： echarts

本文链接：https://blog.csdn.net/xuander666/article/details/115194586

版权

PHP 同时被 2 个专栏收录

38 篇文章 2 订阅

订阅专栏

ThinkPHP

5 篇文章 0 订阅

订阅专栏

先上效果图

在这里插入图片描述

Echarts官网

引用的echarts.min.js文件

链接：https://pan.baidu.com/s/12eMQnn5bd9RWSV-qhea7bQ
提取码：7vtp

HTML文件

<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>{$__system__.CA001}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../../public/X-admin/css/font.css?t={$t}">
    <link rel="stylesheet" href="../../public/X-admin/css/xadmin.css?t={$t}">
    <script src="../../public/X-admin/lib/layui/layui.js?t={$t}" charset="utf-8"></script>
    <script type="text/javascript" src="../../public/X-admin/js/xadmin.js?t={$t}"></script>
    <script type="text/javascript" src="../../public/X-admin/js/echarts.min.js?t={$t}"></script>
    <script type="text/javascript" src="../../public/basic.js?t={$t}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
          <script src="../../public/X-admin/js/html5.min.js?t={$t}"></script>
          <script src="../../public/X-admin/js/respond.min.js?t={$t}"></script>
        <![endif]-->
</head>

<style type="text/css">
    .layui-fluid {
        padding: 0 0;
    }

    .layui-col-space15>* {
        padding: 7.5px;
        margin-bottom: -15px;
    }

    .welcome {
        height: 781px;
        text-align: center;
        position: relative;
        padding: 10px 15px;
        line-height: 260px;
        font-size: 36px;
        font-weight: bold;
    }

    .copy {
        text-align: center;
        height: 30px;
        line-height: 30px;
        border: 1px solid #28284626;
        background-color: #efeef0;
        width: 102%;
        margin-left: -13px;
    }
</style>

<body class="layui-anim layui-anim-upbit">
    <div class="x-body">
        <blockquote class="layui-elem-quote layui-quote-nm">
            <form class="layui-form" onSubmit="return false;">
                <div id="searchTable">
                    <div class="layui-input-inline">
                        <input type="text" name="gbtime" id="gbtime" style="width:200px" lay-verify="title"
                            autocomplete="off" placeholder="过磅时间" class="layui-input" value="">
                    </div>
                    <button class="layui-btn" data-type="reload" id="searchbtn" onclick="getdata();getcategory();"><i
                            class="layui-icon">&#xe615;</i>统计</button>
                    <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
                        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>刷新</a>
                </div>
            </form>
        </blockquote>
    </div>
    <div class="layui-container" style="padding:20px;width:100%">
        <blockquote class="layui-elem-quote" style="margin-bottom:30px;font-size:18px">采购数据统计</blockquote>
        <div class="layui-row layui-col-space30">
            <div class="layui-col-xs12 layui-col-md6 layui-col-lg6">
                <div id="main" style="height:300px;margin-bottom:30px"></div>
            </div>
            <div class="layui-col-xs12 layui-col-md6 layui-col-lg6">
                <div id="main3" style="width:100%;height:300px;margin-bottom:30px"></div>
            </div>
            <div class="layui-col-xs12 layui-col-md6 layui-col-lg6">
                <div id="main1" style="width:100%;height:300px;margin-bottom:30px"></div>
            </div>
            <div class="layui-col-xs12 layui-col-md6 layui-col-lg6">
                <div id="main4" style="width:100%;height:300px;margin-bottom:30px"></div>
            </div>
        </div>
    </div>

    <div class="layui-container" style="padding:20px;width:100%">
        <blockquote class="layui-elem-quote" style="margin-bottom:30px;font-size:18px">销售数据统计</blockquote>
        <div class="layui-row layui-col-space30">
            <div class="layui-col-xs12 layui-col-md6 layui-col-lg6">
                <div id="main6" style="height:300px;margin-bottom:30px"></div>
            </div>
            <div class="layui-col-xs12 layui-col-md6 layui-col-lg6">
                <div id="main9" style="width:100%;height:300px;margin-bottom:30px"></div>
            </div>
            <div class="layui-col-xs12 layui-col-md6 layui-col-lg6">
                <div id="main7" style="width:100%;height:300px;margin-bottom:30px"></div>
            </div>
            <div class="layui-col-xs12 layui-col-md6 layui-col-lg6">
                <div id="main10" style="width:100%;height:300px;margin-bottom:30px"></div>
            </div>
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        var myDate = new Date();
        var thisyear = myDate.getFullYear();
        var thismonth = myDate.getMonth() + 1;
        var thisday = myDate.getDate();
        if (thismonth < 10) { thismonth = "0" + thismonth };
        if (thisday < 10) { thisday = "0" + thisday };
        var lastmonth = thismonth - 1;
        if (lastmonth < 10) { lastmonth = "0" + lastmonth };
        var lastdate = thisyear + "-" + lastmonth + "-" + "01";
        var currdate = thisyear + "-" + thismonth + "-" + thisday;
        var gbtime = lastdate + " - " + currdate;
        $("#gbtime").val(gbtime);
        $('#searchbtn').click();
    }
</script>
<script type="text/javascript">
    // 采购净重统计(折线图)
    option = {
        title: {
            text: '采购净重统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            left: 'left',
            data: ['采购净重统计']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '采购净重统计',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: "#A52A2A",
                        lineStyle: {
                            color: "#A52A2A"
                        }
                    }
                },
                data: [],
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option);
    // 采购过磅数量统计(折线图)
    option1 = {
        title: {
            text: '采购过磅数量统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            left: 'left',
            data: ['采购过磅数量统计']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '采购过磅数量统计',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: "#A52A2A",
                        lineStyle: {
                            color: "#A52A2A"
                        }
                    }
                },
                data: [],
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            }
        ]
    };
    var myChart1 = echarts.init(document.getElementById('main1'));
    myChart1.setOption(option1);
    // 采购净重统计(饼图)
    option3 = {
        title: {
            text: '采购净重统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '采购净重统计',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%', '60%', '50%'],
                data: [
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var myChart3 = echarts.init(document.getElementById('main3'));
    myChart3.setOption(option3);
    // 采购过磅数量统计(饼图)
    option4 = {
        title: {
            text: '采购过磅数量统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '采购过磅数量统计',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%', '60%', '50%'],
                data: [
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var myChart4 = echarts.init(document.getElementById('main4'));
    myChart4.setOption(option4);
    // 销售净重统计(折线图)
    option6 = {
        title: {
            text: '销售净重统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            left: 'left',
            data: ['销售净重统计']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '销售净重统计',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: "#2ec7c9",
                        lineStyle: {
                            color: "#2ec7c9"
                        }
                    }
                },
                data: [],
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            }
        ]
    };
    var myChart6 = echarts.init(document.getElementById('main6'));
    myChart6.setOption(option6);
    // 销售过磅数量统计(折线图)
    option7 = {
        title: {
            text: '销售过磅数量统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            left: 'left',
            data: ['销售过磅数量统计']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '销售过磅数量统计',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: "#2ec7c9",
                        lineStyle: {
                            color: "#2ec7c9"
                        }
                    }
                },
                data: [],
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            }
        ]
    };
    var myChart7 = echarts.init(document.getElementById('main7'));
    myChart7.setOption(option7);
    // 销售净重统计(饼图)
    option9 = {
        title: {
            text: '销售净重统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '销售净重统计',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%', '60%', '50%'],
                data: [
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var myChart9 = echarts.init(document.getElementById('main9'));
    myChart9.setOption(option9);
    // 销售过磅数量统计(饼图)
    option10 = {
        title: {
            text: '销售过磅数量统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '销售过磅数量统计',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%', '60%', '50%'],
                data: [
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var myChart10 = echarts.init(document.getElementById('main10'));
    myChart10.setOption(option10);

</script>
<script>
    var sysConfig = {
        siteUrl: '{:getSiteUrl()}',
        images: '__IMG__'
    };
    layui.use(['form', 'layer', 'laydate'], function () {
        var table = layui.table, $ = layui.$, form = layui.form, layer = layui.layer, laydate = layui.laydate;
        laydate.render({
            elem: '#gbtime',
            range: true
        });
    });
    // 获取统计数据(折线图)
    function getdata() {
        $.post(Utils.Uri("{:Url('index/Index/getdata')}", ''), { gbtime: $('#gbtime').val() }, function (data, textStatus) {
            var data = Utils.toAdminJson(data);
            //console.log(data);
            if (data) {
                // 采购净重统计(折线图)
                option.series[0].data = data.buy_total;
                option.xAxis.data = data.buy_second_check_time;
                myChart.setOption(option);
                // 采购过磅数量统计(折线图)
                option1.series[0].data = data.buy_count;
                option1.xAxis.data = data.buy_second_check_time;
                myChart1.setOption(option1);
                // 销售净重统计(折线图)
                option6.series[0].data = data.sale_total;
                option6.xAxis.data = data.sale_second_check_time;
                myChart6.setOption(option6);
                // 销售过磅数量统计(折线图)
                option7.series[0].data = data.sale_count;
                option7.xAxis.data = data.sale_second_check_time;
                myChart7.setOption(option7);
            } else {

            }
        });
    }
    // 获取统计数据(饼图)
    function getcategory() {
        $.post(Utils.Uri("{:Url('index/Index/getcategory')}", ''), { gbtime: $('#gbtime').val() }, function (data, textStatus) {
            var data = Utils.toAdminJson(data);
            if (data) {
                // 采购净重统计(饼图)
                option3.series[0].data = data.buy_item_name;
                myChart3.setOption(option3);
                // 采购过磅数量统计(饼图)
                option4.series[0].data = data.buy_count;
                myChart4.setOption(option4);
                // 销售净重统计(饼图)
                option9.series[0].data = data.sale_item_name;
                myChart9.setOption(option9);
                // 销售过磅数量统计(饼图)
                option10.series[0].data = data.sale_count;
                myChart10.setOption(option10);
            } else {

            }
        });
    }
</script>
</html>

PHP文件

	// 获取统计表数据(折线图)
    public function getdata()
    {
        // 拆开时间
        $gbtime = array();
        if(!empty($_REQUEST['gbtime'])){
            $gbtime=$_REQUEST['gbtime'];
            $gbtime = explode(" - ", $gbtime);
        }
        // 将时间转化为时间戳
        $gbtime1 = strtotime($gbtime[0].' 00:00:00'); // 开始时间
        $gbtime2 = strtotime($gbtime[1].' 23:59:59'); // 结束时间

        // 查询检斤记录表(采购)
        $where_buy = [
            'status' => '5', // 二检完成
            'business_type' => '1', // 业务类型(1->采购,2->销售)
            'second_check_time' => ['between',[$gbtime1,$gbtime2],'and'] // 二检时间
        ];
        $remote_detection_buy = Db::name('remote_detection')->field('count(id) as count,sum(weight) as total,FROM_UNIXTIME(second_check_time,"%Y-%m-%d") as second_check_time')->where($where_buy)->group('FROM_UNIXTIME(second_check_time,"%Y-%m-%d")')->select();
        
        // 查询检斤记录表(销售)
        $where_sale = [
            'status' => '5', // 二检完成
            'business_type' => '2', // 业务类型(1->采购,2->销售)
            'second_check_time' => ['between',[$gbtime1,$gbtime2],'and'] // 二检时间
        ];
        $remote_detection_sale = Db::name('remote_detection')->field('count(id) as count,sum(weight) as total,FROM_UNIXTIME(second_check_time,"%Y-%m-%d") as second_check_time')->where($where_sale)->group('FROM_UNIXTIME(second_check_time,"%Y-%m-%d")')->select();
        
        // 合并采购数组
        if($remote_detection_buy){
            foreach ($remote_detection_buy as $k=>$v){
                $buy_second_check_time[] = $v['second_check_time'];
                $buy_count[] = $v["count"];
                $buy_total[] = $v["total"];
            }
        }
        // 合并销售数组
        if($remote_detection_sale){
            foreach ($remote_detection_sale as $kk=>$vv){
                $sale_second_check_time[] = $vv['second_check_time'];
                $sale_count[] = $vv["count"];
                $sale_total[] = $vv["total"];
            }
        }

        // 准备统计数据(一定要将数组中所有数据转化为字符串)
        $data = [
            'buy_second_check_time' => $buy_second_check_time, // 日期(采购)
            'buy_count' => $this->tostring($buy_count), // 记录数(采购)
            'buy_total' => $this->tostring($buy_total), // 净重数(采购)
            'sale_second_check_time' => $sale_second_check_time, // 日期(销售)
            'sale_count' => $this->tostring($sale_count), // 记录数(销售)
            'sale_total' => $this->tostring($sale_total), // 净重数(销售)
        ];

        echo json_encode($data);
    }

    // 获取统计表数据(饼图)
    public function getcategory()
    {
        // 拆开时间
        $gbtime = array();
        if(!empty($_REQUEST['gbtime'])){
            $gbtime=$_REQUEST['gbtime'];
            $gbtime = explode(" - ", $gbtime);
        }
        // 将时间转化为时间戳
        $gbtime1 = strtotime($gbtime[0].' 00:00:00'); // 开始时间
        $gbtime2 = strtotime($gbtime[1].' 23:59:59'); // 结束时间

        // 查询检斤记录表(采购)
        $where_buy = [
            'status' => '5', // 二检完成
            'business_type' => '1', // 业务类型(1->采购,2->销售)
            'second_check_time' => ['between',[$gbtime1,$gbtime2],'and'] // 二检时间
        ];
        $remote_detection_buy = Db::name('remote_detection')->field('count(id) as count,sum(weight) as total,item_name')->where($where_buy)->group('item_code')->select();
        
        // 查询检斤记录表(销售)
        $where_sale = [
            'status' => '5', // 二检完成
            'business_type' => '2', // 业务类型(1->采购,2->销售)
            'second_check_time' => ['between',[$gbtime1,$gbtime2],'and'] // 二检时间
        ];
        $remote_detection_sale = Db::name('remote_detection')->field('count(id) as count,sum(weight) as total,item_name')->where($where_sale)->group('item_code')->select();
        
        // 合并采购数组
        if($remote_detection_buy){
            foreach ($remote_detection_buy as $k=>$v){
                $arr1=array();
                $arr1['value'] = $v['total']; // 净重总数
			    $arr1['name'] = $v['item_name']; // 物资名称
                $buy_item_name[] = $arr1;

                $arr2=array();
                $arr2['value'] = $v['count']; // 净重总数
			    $arr2['name'] = $v['item_name']; // 物资名称
                $buy_count[] = $arr2;
            }
        }
        // 合并销售数组
        if($remote_detection_sale){
            foreach ($remote_detection_sale as $kk=>$vv){
                $arr1 = array();
                $arr1['value'] = $vv['total']; // 净重总数
			    $arr1['name'] = $vv['item_name']; // 物资名称
                $sale_item_name[] = $arr1;

                $arr2 = array();
                $arr2['value'] = $vv['count']; // 净重总数
			    $arr2['name'] = $vv['item_name']; // 物资名称
                $sale_count[] = $arr2;
            }
        }
        // 准备统计数据
        $data = [
            'buy_item_name' => $buy_item_name, // 物资名称(采购)
            'buy_count' => $buy_count, // 记录数(采购)
            'sale_item_name' => $sale_item_name, // 物资名称(销售)
            'sale_count' => $sale_count, // 记录数(销售)
        ];
        echo json_encode($data);
    }

    // 转字符串格式(string)
    public function tostring($data){
        if($data){
            foreach ($data as $key => $value) {
                $data[$key] = (string)$value;
            }
        }
        return $data;
    }