tp6使用echarts展示饼状图（实时数据）

最新推荐文章于 2022-05-09 17:23:07 发布

array_sum

最新推荐文章于 2022-05-09 17:23:07 发布

阅读量823

点赞数

分类专栏：随笔文章标签： thinkphp echarts

本文链接：https://blog.csdn.net/array_sum/article/details/117640107

版权

随笔专栏收录该内容

13 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、html前端样式
二、后台处理

一、html前端样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>财务报表</title>
</head>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">

<style>
    .top{
        margin: 20px;
        float: left;
        width: 300px;
        height: 300px;

    }
    .bottom{
        margin: 20px;
        float: left;
        overflow:hidden;
        width: 300px;
        height: 300px;

    }
    #main{
        float: left;
    }
</style>
<body>
<h1>财务报表</h1>
<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">财务概况</li>
        <li>销售总势</li>
        <li>财务明细</li>
    </ul>
    <div class="layui-tab-content" style="height: 800px;">
        <div class="layui-tab-item layui-show">
            <form>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="test5" name="start" placeholder="开始日期">
                    </div> 一
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="test6" name="end" placeholder="结束日期">
                    </div>
                </div>
                <button type="submit" class="layui-btn">查询</button>
            </form>
            <div id="main" style="width: 600px;height:400px;"></div>
            <div id="right">
                <div class="top">
                    <a href="http://www.day8.com/demo/blog/puts" class="layui-btn" target="_blank">申请提现</a>
                </div>
                <div class="bottom">

                </div>
            </div>
        </div>
        <div class="layui-tab-item">2</div>
        <div class="layui-tab-item">3</div>
    </div>
</div>
</body>
</html>
<script src="/layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
<script>
    // //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element','laydate'],function(){
        var element = layui.element//元素操作
        var laydate = layui.laydate;
        //日期时间选择器
        laydate.render({
            elem: '#test5'
            ,type: 'datetime'
        });
        //日期时间选择器
        laydate.render({
            elem: '#test6'
            ,type: 'datetime'
        });

    });
</script>
<script type="text/javascript">
    // // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: 10,
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 1048, name: '总销售额'},
                    {value: 735, name: '退款金额'},
                    {value: 580, name: '未消费'},
                    {value: 484, name: '未提现'},
                    {value: 300, name: '已提现'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

二、后台处理

代码如下：

public function index(Request $request)
    {
        $start=$request->param('start');
        print_r($start);
        $end=$request->param('end');
        print_r($end);
        $bool=Report::where('data','between',["$start","$end"])->select()->toArray();
        print_r($bool);

        return view('',compact('bool'));
    }

array_sum

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
tp6使用echarts展示饼状图（实时数据）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、html前端样式二、后台处理一、html前端样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>财务报表</title></head><link rel="stylesheet" href="/layui/css/layui.
复制链接

扫一扫