统计图分析销售情况

最新推荐文章于 2023-12-25 10:46:40 发布

加油，少年！

最新推荐文章于 2023-12-25 10:46:40 发布

阅读量226

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_57725431/article/details/124979765

版权

本文介绍了在项目中如何利用JavaScript和CSS实现圆形统计图和柱形统计图。作者展示了代码示例，并提到控制器部分的代码可通过关注并私信获取。文章鼓励读者点赞和收藏以示支持。

摘要由CSDN通过智能技术生成

大家好！在做项目中难免会遇到统计图这种东西，所以今天我给大家介绍的就是统计图这一列的数据情况了，我写的代码有圆形统计图和柱形统计图，他们分工明确，却也相似，因为可以比较出具体的数据，所以各有各的有的吧！

大家来看效果图！

如图：大家可以看见的是车辆进程分析表和车辆进程整合统计表，虽然各自不同，但是效果也是差不多的，都能统计出这种效果！各有千秋与众不同吧！介绍也不用多说了，大家都可以看懂的图片！直接看代码怎么写吧！

先讲一下视图的代码

  <style>
        .layui-input-block {
            margin-top: 10px;
        }
   
        .textMoeny {
            font-size: 24px;
            color: #009688;
        }

        .layuiadmin-card-text {
            background-color: #f8f8f8;
            border-radius: 1.5px;
            padding: 14px;
        }

        .layui-card .layui-card-header i {
            margin-right: 10px;
            font-size: 20px;
            color: #ff6a00;
        }
    </style>

这是CSS代码，我就不介绍了！

  <div class="layui-fluid" style="font-size: 16px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-col-md6">
                    <div class="layui-card" style=" height:400px;">
                        <