统计组合图：实例一

最新推荐文章于 2022-04-07 09:00:00 发布
最新推荐文章于 2022-04-07 09:00:00 发布
阅读量479 收藏
点赞数
分类专栏： JS CSS PHP
懒虫
本文链接：https://blog.csdn.net/xcbzsy/article/details/104388159
版权
PHP 同时被 3 个专栏收录
106 篇文章 1 订阅
订阅专栏
JS
63 篇文章 2 订阅
订阅专栏
CSS
16 篇文章 1 订阅
订阅专栏

在这里插入图片描述

index.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>融裕行生产数据概览</title>
    <link rel="stylesheet" href="./eslydsj/css/base.css">
    <link rel="stylesheet" href="./echart/css/bootstrap-4.2.1.css">
    <style>
        .pull-left{
            float: left;
        }
        .pull-right{
            float: right;
        }
        .title{
            padding: 0;font-size: 1.8rem;color: #FFF;font-weight: bold;padding-top: 50px;
        }
        .border_t{
            height: 167px;
            border-bottom: 1px solid #034c6a;
        }
        .div_height{height: 230px !important;}
        .table_p table thead th:first-child{color: #FFF}
        .div_any02{width:60%}
        .div_any03{width: 20%;margin: 0}
        .order_list{
            margin: 10px;
            color: #FFF;
        }
        .order_list td{
            font-size: 1.3rem;
            line-height: 40px;
        }
        .order_list td:first-child{
            color: #17ccde;
        }
        .order_1{color: #00e765;text-align: right}
        .order_2{color: #07A3AD;text-align: right}
        .order_3{color: #F09800;text-align: right}
        .order_4{color: #f06431;text-align: right}
    </style>
</head>
<body class="con">
    <!--顶部-->
    <header class="header left">
        <div class="left nav">
            <ul>
                <li class="@if(in_array(request()->path(),['/']) ) nav_active @endif"><i class="nav_1"></i><a href="{{ route('/') }}">生产数据概览</a> </li>
                <li class="@if(in_array(request()->path(),['predict']) ) nav_active @endif"><i class="nav_3"></i><a href="{{ route('predict') }}">计划订单平衡概览</a> </li>
            </ul>
        </div>
        <div class="header_center left">
            <h1><strong>融裕行生产数据概览</strong></h1>
        </div>
        <div class="right nav text_right">
            <ul style="width: 100%;">
                <li class="data" id="localtime" style="width: 100%;display: block;text-align: right;padding-right: 20px;"></li>
            </ul>
        </div>
    </header>
    <!--内容部分-->
    <div class="con left">
        <!--统计分析图-->
        <div class="div_any">
            <div class="left div_any01">
                <div class="div_any_child div_height">
                    <div class="div_any_title">订单数量</div>
                    <p id="char1" style="height: 200px"></p>
                </div>
                <div class="div_any_child" style="height: 610px;overflow: hidden">
                    <div class="div_any_title">订单下货率 </div>
                    <div style="height: 280px;overflow: hidden">
                        <p id="char5" style="height: 320px"></p>
                    </div>
                    <div style="height: 295px;overflow: hidden">
                        <p id="char6" style="height: 320px"></p>
                    </div>
                    <div style="clear: both"></div>
                </div>
            </div>
            <div class="div_any02 left">
                <div class="div_any_child div_height">
                    <div class="table_p">
                        <table>
                            <thead>
                                <tr>
                                    <th>工厂名称</th>
                                    <th>出勤人数</th>
                                    <th>请假比例</th>
                                    <th>计划数量</th>
                                    <th>完成比例</th>
                                    <th>台产</th>
                                </tr>
                            </thead>
                            <tbody class="has-many-extra-forms">
                                {{--<tr>--}}
                                    {{--<td>融裕行</td>--}}
                                    {{--<td>368</td>--}}
                                    {{--<td>9568</td>--}}
                                    {{--<td>9200</td>--}}
                                    {{--<td>368</td>--}}
                                    {{--<td>3.85%</td>--}}
                                {{--</tr>--}}
                                {{--<tr><td>源盛</td><td>368</td><td>9568</td><td>9200</td><td>368</td><td>3.85%</td></tr>--}}
                                {{--<tr><td>茂盛</td><td>368</td><td>9568</td><td>9200</td><td>368</td><td>3.85%</td></tr>--}}
                                {{--<tr><td>和盛</td><td>368</td><td>9568</td><td>9200</td><td>368</td><td>3.85%</td></tr>--}}
                                {{--<tr><td>金路</td><td>368</td><td>9568</td><td>9200</td><td>368</td><td>3.85%</td></tr>--}}
                            </tbody>
                            <template class="extra-tpl">
                                <tr>
                                    <td class="factory_name"></td>
                                    <td class="job_people"></td>
                                    <td class="ask_rate"></td>
                                    <td class="plan_num"></td>
                                    <td class="finish_rate"></td>
                                    <td class="unit_num"></td>
                                </tr>
                            </template>
                        </table>
                    </div>
                </div>
                <div class="div_any_child" style="height: 295px">
                    <div class="div_any_title">小时产量 </div>
                    <div style="height: 255px">
                        <p id="char3" style="height: 255px"></p>
                    </div>
                </div>
                <div class="div_any_child" style="height: 300px;overflow: hidden">
                    <div class="div_any_title">两周日产量 </div>
                    <div  style="height: 280px">
                        <p id="char4"  style="height: 280px;width: 108%;left: -3%;"></p>
                    </div>
                </div>
            </div>
            <div class="right div_any03">
                <div class="div_any_child div_height">
                    <div class="div_any_title">订单数据</div>
                    <div class="pull-left"  style="width: 45%;height: 200px;overflow: hidden;">
                        <p id="char9" style="width: 128%;height: 250px"></p>
                    </div>
                    <div class="pull-left"  style="width: 55%;height: 200px">
                        <table class="order_list">
                            <tbody>
                                <tr><td>在产款数:</td><td class="order_1">35款</td></tr>
                                <tr><td>延误款数:</td><td class="order_2">0款</td></tr>
                                <tr><td>计划数量:</td><td class="order_3">56789件</td></tr>
                                <tr><td>完成数量:</td><td class="order_4">45678件</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="div_any_child" style="height: 295px">
                    <div class="div_any_title">月人均台产TOP5 </div>
                    <div  style="height: 255px;width: 95%;">
                        <p id="char2" style="height: 280px"></p>
                    </div>
                </div>
                <div class="div_any_child" style="height: 300px;overflow: hidden">
                    <div class="div_any_title"> </div>
                    <div  style="height: 280px">
                        <p id="char8" style="height: 280px"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./echart/js/jquery.min.js"></script>
    <script src="./echart/js/echarts-4.2.1.min.js"></script>
    <script src="./eslydsj/js/base.js"></script>
    <script src="./eslydsj/js/index_overview.js"></script>
    <script src="./eslydsj/js/echarts-liquidfill.min.js"></script>
    <script src="./js/initTime.js"></script>
    <script>
        $(function () {
            var index = 0;
            var tpl = $('template.extra-tpl');
            var now_month = '201912';
            function init_extra(months){
                $('.has-many-extra-forms').html('');

                var data = {
                    '_token': "{{ csrf_token() }}",
                    'ym': months,
                };
                $.ajax({
                    url:'{{ route('getOverview') }}',
                    data:data,
                    type:'GET',
                    cache:false,
                    dataType:'json',
                    success:function(data) {
                        $('.has-many-extra-forms').html('');
                        for (var i =0; i< data.list.length;i++){
                            addHtml(data.list[i])
                        }
                        ryhChart(data.job_list,1);
                        $('.order_1').html(data.bulk_list.list.bulk_num+'款')
                        $('.order_2').html(data.bulk_list.list.delay_num+'款')
                        $('.order_3').html(data.bulk_list.list.plan_num+'件')
                        $('.order_4').html(data.bulk_list.list.finish_num+'件')
                        ryhChart9(data.bulk_list.rate,9);

                        ryhChart2(data.avg_table,2);
                        //小时产量
                        ryhChart3(data.hours_arr,3);
                        ryhChart4(data.pro_date,4);
                        ryhChart5(data.table,5);
                        // ryhChart8('',8);
                        ryhChart6(data.table,6);
                    }
                });
            }
            init_extra(now_month)
            function addHtml(data){
                index++;
                var template = tpl.html().replace(/__LA_KEY__/g, index).replace(/factory_name/g, 'factory_name_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/job_people/g, 'job_people_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/ask_rate/g, 'ask_rate_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/plan_num/g, 'plan_num_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/finish_rate/g, 'finish_rate_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/unit_num/g, 'unit_num_'+index);
                $('.has-many-extra-forms').append(template);
                $('.factory_name_'+index).html(data['factory_name'])
                $('.job_people_'+index).html(data['job_people'])
                $('.ask_rate_'+index).html(data['ask_rate']+'%')
                $('.plan_num_'+index).html(data['plan_num'])
                $('.finish_rate_'+index).html(data['finish_rate']+'%')
                $('.unit_num_'+index).html(data['unit_num'])
            }
        })
    </script>
</body>
</html>
新老农
关注
专栏目录
统计图表demo实例
08-20
统计图表demo实例、折线图、饼图、柱状图；兼容各大浏览器，是否美观；
统计组合图：实例二
懒虫的博客
02-19 236
index.blade.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>融裕行计划订单平衡概览</title> <link rel="stylesheet" href="./eslydsj/css...
统计组合图：实例三
懒虫的博客
02-19 217
index.blade.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地图界面</title> <link rel="stylesheet" href="./eslydsj/js/bstable...
EXcel中如何做一个组合统计图？
覃庆奖
07-29 5673
话不多说，直接进入主题，打开Excel软件或者是WPS软件，创建一个新的表格如下所示，全选改数据内容。 在Excel菜单栏中点击插入，选择图表或者在线图表。 在图表中选择一个自身喜欢的组合统计图类型，如下图所示。 选择自身喜欢类型如下图 如有不会添加数据标签的话，可以访问该文章地址：https://blog.csdn.net/qqj3066574300/article/details/107603544 然后给图表添加数据标签如下图所示。 如还想做到上部分是图表，下部分是..
创建图表实例 统计图
tzweilai的专栏
06-11 1286
using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;us
Python—— 组合数据类型（模块5: jieba库的使用）（实例:基本统计值计算&文本词频统计）
qq_51308373的博客
10-23 2698
前言 本篇主要介绍组合数据类型，以基本统计值计算为例，介绍函数使用和类型定义。以文本词频统计为例，介绍Jieba库的使用。 （从本篇开始，出现的一些库中函数介绍以及部分简单代码都将以图片形式呈现） 读完本篇，你将了解： 1.方法论： Python三种主流组合数据类型的使用方法（建立集合、序列、字典模式） 2.实践能力： 学会编写处理一组数据的程序 本篇将系统介绍： 1.集合类型及操作 2.序列类型及操作（包括元组类型、列表类型） 3.实例:基本统计值计算 4.字典类型及操作 5.模块5: jieba库的使用
js封装成插件_Canvas统计图插件编写实例
12-12
在JavaScript中，封装一个Canvas统计图插件是一个高效的方法，以创建可复用且高度定制化的图表组件。本文将详细讲解如何实现这个插件，并探讨其中的关键知识点。 首先，插件的核心是`ChartDraws`函数，它接受一个`...
MATLAB统计分析与应用： Copula理论及应用实例
最新发布
06-08
简单来说，Copula使得我们能够独立地处理各个变量的边际分布，然后通过Copula函数将它们组合起来形成一个完整的联合分布。 在MATLAB中，我们可以使用`copularnd`函数来生成基于特定Copula类型的随机样本。例如，...
Python入门6.1 组合数据类型 | 实例：基本统计值计算
Sunflower_ding的博客
08-26 517
集合类型（无序） 最典型：数据去重 序列类型（有序） 没有数字就按照字母序来比较 元组类型 列表类型 Is.index(x) 返回x在Is中的索引 序列类型应用场景 实例：基本统计值计算 sorted( ) 排序 # 开发时间：2021/8/26 11:15 # 得到一个长度不确定的列表 def getnNum(): nums = [] iNumStr = input("请输...
C#实现排列组合算法完整实例
09-04
在C#编程中，排列组合算法是解决许多数学和计算机科学问题的基础，特别是在处理数据排序、统计计算以及算法设计时。本实例详细介绍了如何利用C#实现这两种基本的算法：排列（Permutation）和组合（Combination）。...
AChartEngine高级应用之CombinedXYChart（组合统计图）在单个统计图上显示多样化的数据
01-19
现在是信息飞速发展时代，单个的统计图已经无法满足实际生产的要求，人们只想通过快速的观察就能知道很多信息，所以组合统计图就运用而生了，诸如，人们想了解一个地方的大致情况，首先可能要了解当地的天气情况，交通运输情况等，以下我模拟的是一个地方的天气、光照时间分布情况的统计图。这个是AChartEngine图表的高级应用。 构建CombinedXYChart图的步骤主要分为以下三步，还需要在项目中引入AChartEngine依赖jar包，在Manifest中添加：<activity android:name="org.achartengine.GraphicalActivity" />
echarts 统计图案例
09-13
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。 ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。
自定义统计图条形加折线
07-05
项目开发中经常用到统计图表,网上也有很多的图表类库，比如 ：MPAndroidChart，XCL-chart,hellochart,AChartEngine等等，以前我写这些都是搬轮子造车，基本自定义自己写的少。 但是用别人的东西好处就是快方便，坏处就是不好维护了。前几天有个需求，要求柱形图和线型图组合，柱形图的数据依赖左边Y轴，还得分成3段，线型图有1条，右边还有Y轴，再加一个虚线的平均分数，左右y轴数据固定。百度了好多都是相似，好吧找不到轮子只能模仿着自己造了。
Servlet统计图实例
qingbt的专栏
05-12 1552
    在一些Web软件的开发过程中，我们会遇到显示动态图片的问题，如根据数据库内容生成的柱状图、饼图等等。下面的例子是利用Servlet绘制一个成绩统计柱状图，并把图形和相关文字信息一同显示到网页上。数据用Access存储，如果需要运行该程序，应在Access中建立一个"test"表，并设计其唯一列名为"score"，类型为数字即可。输入若干成绩数据之后建立一个数据源（如test），并把web.
QCharts - 5.示例-条形统计图
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
04-07 1211
【代码】QCharts - 5.示例-条形统计图。
第4-3课：3 种统计图及示例
老齐教室
09-22 528
本课将继续学习其他类型的统计图，有了上一课的基础，学习下面的内容就比较容易了。不同类型的统计图，只是生成 Trace 对象的类的名称变化一下，其参数的调用方式大同小异。因此，当本课介绍几种统计图时，可能就不如以往那么细致，如果读者想要详细了解某些细节，就需要亲自阅读文档——这种方法是必须要掌握的。 4.3.1 饼图 继续使用上一课的数据集。 import pandas as pd import p...
echarts饼图和条形统计图实例
weixin_58160355的博客
04-01 923
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &.
统计 一些排列组合
小画家
11-17 548
php排列组合函数(无重复) http://www.liyangweb.com/php/215.html       PHP排列组合及性能对比 https://github.com/serbanghita/Mobile-Detect http://blog.csdn.net/yang3290325/article/details/8028670 组词算法的思路
统计图，图文组合控件
qq_15768137的博客
10-17 328
效果见下图：   package com.logistics.widgets; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.grap...
Zabbix配置监控与聚合图形：实例代码详解
例如，创建一个脚本来获取磁盘I/O统计，然后在Zabbix Agent配置中添加此脚本作为监控项。在`/etc/zabbix/zabbix_agentd.conf`中添加如下行： ```conf UserParameter=diskio,/usr/local/bin/custom_diskio.sh ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值