ECharts 简单的使用

Posted 2023-02-22 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.效果