ECharts 简单的使用

Posted 2021-06-24 IronMenPHP

多参考菜鸟教程

1.引入文件

  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://www.runoob.com/static/js/wonderland.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

2.html

{extend name='bank/index' /}
{block name="title"}<title>统计 </title>{/block}
{block name="nav"}
{__block__}
<form action="{:url('count')}">
<div class="layui-form-item" style="margin-top: 30px">
    <div class="layui-inline" >
        <label class="layui-form-label"></label>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="date" name="time_min" placeholder="查询起始日期" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="date" name="time_max" placeholder="查询截至日期" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button  type="submit" id="sendtime" class="layui-btn layui-btn-warm">查询</button></form>
<script>
// $('#sendtime').click(function () {
//     var  time_min = $("input[name='time_min']").val();
//     var  time_max = $("input[name='time_max']").val();
//     console.log(time_min)
//     $.ajax({
//         'url':"{:url('count')}",
//         'data':{
//             time_min : time_min,
//             time_max : time_max,
//         },
//         success:(res)=>{
//             console.log(res)
//         }
//     })
// })

</script>
</div>
<div style="display: flex">
    <div id="main" style="width: 600px;height:400px;">
    </div>

    <div>
        <p>总金额：    <span id="money_sum">{$tenantList.money_sum} </span> </p>
        <p>退款金额：    <span  id="money_out">{$tenantList.money_out} </span></p>
        <p>未消费：     <span  id="money_stop">{$tenantList.money_stop} </span></p>
        <p>未提现：     <span  id="nogetmoney">{$tenantList.nogetmoney} </span></p>
        <p>已提现：     <span  id="isgetmoney">{$tenantList.isgetmoney} </span></p>
    </div>
</div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var sum = Number($('#money_out').text()) + Number($('#money_sum').text()) + Number($('#money_stop').text()) + Number($('#nogetmoney').text()) + Number($('#isgetmoney').text());
    var money_out =  Number($('#money_out').text()) /Number(sum)  * Number(100) ;
    var money_sum = $('#money_sum').text() /Number(sum)  * Number(100) ;
    var money_stop = $('#money_stop').text() /Number(sum)  * Number(100) ;
    var nogetmoney = $('#nogetmoney').text() /Number(sum)  * Number(100);
    var isgetmoney = $('#isgetmoney').text() /Number(sum)  * Number(100) ;
    console.log(money_out);
    myChart.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:[          // 数据数组，name 为数据项名称，value 为数据项值
                    {value:money_sum, name:'销售总额 '+ money_sum.toFixed(2)+'%'},
                    {value:money_out, name:'退款金额'+ money_out.toFixed(2) +'%'},
                    {value:money_stop, name:'未消费'+ money_stop.toFixed(2) +'%'},
                    {value:nogetmoney, name:'未提现'+ nogetmoney.toFixed(2) +'%'},
                    {value:isgetmoney, name:'已提现'+ isgetmoney.toFixed(2) +'%'},
                ]
            }
        ]
    })
</script>

{/block}

{block name="body"}

{/block}

3.后端

 /**
     * @return \\Illuminate\\Contracts\\Foundation\\Application|\\Illuminate\\Contracts\\View\\Factory|\\Illuminate\\View\\View|\\think\\response\\View
     * author: IronMenZFB
     * date:c
     */
    public function count(Request $request)
    {
        $time_min = $request->param('time_min');
        $time_max = $request->param('time_max');
        if ($time_min == "" && $time_max == '') {
            $tenantList = Tenant::where('id', self::UID)->find();
        } else {
            $tenantList = Tenant::where('id', self::UID)->whereTime('create_time', 'between', [$time_min, $time_max])->find();
        }
        return view('bank/bank-count', compact('tenantList'));
    }

4.效果