当前位置: 首页 > news >正文

漏刻有时数据可视化大屏(16)数据指标KPI和柱图折线图混排

在这里插入图片描述

CSS样式表

/*面板*/
.pannel {width: 100%;margin-top: 30px;clear: both;
}.item_l {float: left;width: 20%; /*3格=60%*/margin: 0;
}.item_r {float: left;width: 10%; /*4格=40%*/margin: 0;
}.item_child {float: left;width: 50%;
}.item_child_b {float: left;width: 100%;
}.item_title {font-size: 18px;font-weight: bold;margin-left: 20px;
}.item_num {margin: 5px 20px;font-size: 24px;font-weight: bold;color: #18a1e9;
}.item_norm {font-size: 14px;font-weight: 500;
}.divider {border-right: 1px solid #C5C7CA;
}

HTML布局

<!--KPI指标-->
<div class="pannel"><div class="item_l"><div class="item_child"><p class="item_title">当月委托单</p><p class="item_num" id="zb1">1320</p></div><div class="item_child"><p class="item_norm">已完成:320</p><p class="item_norm">未完成:640</p><p class="item_norm">超 时:630</p></div></div><div class="item_l"><div class="item_child"><p class="item_title">当月样品数</p><p class="item_num" id="zb2">1320</p></div><div class="item_child"><p class="item_norm">已完成:320</p><p class="item_norm">未完成:640</p><p class="item_norm">超 时:630</p></div></div><div class="item_l"><div class="item_child"><p class="item_title">当月检测数</p><p class="item_num" id="zb3">1320</p></div><div class="item_child"><p class="item_norm">已完成:320</p><p class="item_norm">未完成:640</p><p class="item_norm">超 时:630</p></div></div><div class="item_r divider"><div class="item_child_b"><p class="item_title">平均合格率</p><p class="item_num"><label id="zb4"></label>%</p></div></div><div class="item_r"><div class="item_child_b"><p class="item_title">设备使用</p><p class="item_num"><label id="zb5"></label>小时</p></div></div><div class="item_r"><div class="item_child_b"><p class="item_title">成本</p><p class="item_num"><label id="zb6"></label>万元</p></div></div><div class="item_r"><div class="item_child_b"><p class="item_title">利润</p><p class="item_num"><label id="zb7"></label>万元</p></div></div>
</div><!--Echarts图表-->
<div class="pannel"><div id="echart1" style="width:100%;height: 600px;"></div>
</div>

Echarts图表

/*Echarts图表封装函数*/
function getDetailLine(id) {var myChart = echarts.init(document.getElementById(id));var option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {top: '16%',right: '3%',left: '2%',bottom: '5%',containLabel: true},dataZoom: [{show: true,start: 0,end: 40,bottom: 0,handleSize: '40%',backgroundColor: 'rgba(0,0,0,0.1)',fillerColor: 'rgba(0,0,0,0.3)'}],legend: {data: ['委托单', '样品数', '检测数', '合格率(单位:%)'],left: '10',top: '5%'},xAxis: {type: 'category',boundaryGap: true,axisLabel: {show: true,textStyle: {color: 'rgba(0,0,0,.6)'}},axisLine: {lineStyle: {color: 'rgba(0,0,0,0.5)'}},data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日']},yAxis: [{type: "value",name: "数量",axisLabel: {show: true},axisLine: {lineStyle: {color: 'rgba(0,0,0,0.5)'}},splitLine: {show: true, lineStyle: {color: 'rgba(0,0,0,.2)'}}},{type: "value",name: "百分比",axisLabel: {show: true},axisLine: {lineStyle: {color: 'rgba(0,0,0,0.5)'}},splitLine: {show: false}},],series: [{name: '委托单',yAxisIndex: 0,type: 'bar',barWidth: '15%',itemStyle: {color: "#18a1e9",barBorderRadius: 5,},data: [18203, 23489, 29034, 104970, 131744, 630230, "", "", 18203, 23489, 29034, 104970, 131744, 630230, 29034, 18203, 23489, 29034, 104970, 131744, 630230, "", "", 18203, 23489, 29034, 104970, 131744, 630230, 29034]}, {name: '样品数',yAxisIndex: 0,type: 'bar',barWidth: '15%',itemStyle: {color: "#e2a236",barBorderRadius: 5,},data: [18203, 23489, 29034, 104970, 131744, 630230, "", "", 18203, 23489, 29034, 104970, 131744, 630230, 29034, 18203, 23489, 29034, 104970, 131744, 630230, "", "", 18203, 23489, 29034, 104970, 131744, 630230, 29034]}, {name: '检测数',yAxisIndex: 0,type: 'bar',barWidth: '15%',itemStyle: {color: "#60b234",barBorderRadius: 5,},data: [18203, 23489, 29034, 104970, 131744, 630230, "", "", 18203, 23489, 29034, 104970, 131744, 630230, 29034, 18203, 23489, 29034, 104970, 131744, 630230, "", "", 18203, 23489, 29034, 104970, 131744, 630230, 29034]}, {name: '合格率(单位:%)',yAxisIndex: 1,symbolSize: 6,itemStyle: {color: "#53bafc",},lineStyle: {color: "#53bafc",},data: [12, 23, 30, 43, 59, 63, 70, 12, 23, 12, 23, 30, 43, 59, 63, 70, 12, 23, 12, 23, 30, 43, 59, 63, 70, 12, 23, 70, 12, 23],type: 'line',smooth: true}]};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}

数据指标

  //数据指标;rollNum("zb1", 0, "2320", 0);rollNum("zb2", 0, "2569", 0);rollNum("zb3", 0, "2318", 0);rollNum("zb4", 0, "96.8", 1);rollNum("zb5", 0, "275", 0);rollNum("zb6", 0, "645", 0);rollNum("zb7", 0, "320", 0);//渲染图表;getDetailLine("echart1");/**elId = 目标元素的 ID;startVal = 开始值;endVal = 结束值;decimals = 小数位数,默认值是0;duration = 动画延迟秒数,默认值是2;*/function rollNum(elId, startVal, endVal, decimalNum) {var n = decimalNum || 0;var countUp = new CountUp(elId, startVal, endVal, n, 2.5, {useEasing: true, // 使用缓和useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)separator: ',',// 分隔器(千位分隔符,默认为',')decimal: '.',// 十进制(小数点符号,默认为 '.')prefix: '',	            // 字首(数字的前缀,根据需要可设为 $,¥,¥ 等)suffix: ''              // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等)});if (!countUp.error) {countUp.start();} else {console.error(countUp.error);}}

@漏刻有时

相关文章:

漏刻有时数据可视化大屏(16)数据指标KPI和柱图折线图混排

CSS样式表 /*面板*/ .pannel {width: 100%;margin-top: 30px;clear: both; }.item_l {float: left;width: 20%; /*3格60%*/margin: 0; }.item_r {float: left;width: 10%; /*4格40%*/margin: 0; }.item_child {float: left;width: 50%; }.item_child_b {float: left;width: 10…...

基于Stable Diffusion的图像合成数据集

当前从文本输入生成合成图像的模型不仅能够生成非常逼真的照片&#xff0c;而且还能够处理大量不同的对象。 在论文“评估使用稳定扩散生成的合成图像数据集”中&#xff0c;我们使用“稳定扩散”模型来研究哪些对象和类型表现得如此逼真&#xff0c;以便后续图像分类正确地分配…...

云计算:常用运维软件工具

目录 一、理论 1.云管理工具 2.虚拟化工具 3.容器管理工具 4.运维自动化工具 5.版本控制工具 6.配置管理工具 7.编辑器工具 8.代码质量工具 9.网络管理工具 10.数据库管理工具 11.数据中心设备管理工具 12.数据可视化工具 13.服务器管理工具 14.应用性能管理工具…...

多测师肖sir_高级金牌讲师_python的安装002

一、python安装 1、python包&#xff08;我们目前学习的版本是3.7&#xff09; python-3.7.3 版本 2、Python下载的官网&#xff1a;https://www.python.org/downloads/ 最新包&#xff1a;3.12 3、下载好python安装包&#xff0c;在新建一个python文件件&#xff0c;我们要…...

gin实现event stream

event stream是属于http的一种通信方式&#xff0c;可以实现服务器主动推送。原理于客户端请求服务器之后一直保持链接&#xff0c;服务端持续返回结果给客户端。相比较于websocket有如下区别&#xff1a; 基于http的通信方式&#xff0c;在各类框架的加持下不需要开发人员自己…...

pytorch中transform库中常用的函数有哪些及其用法?

在PyTorch的torchvision.transforms库中&#xff0c;有许多常用的图像变换函数可用于数据增强和预处理。下面列举了一些常用的函数及其用法&#xff1a; Resize(size): 调整图像大小为给定的尺寸。 transform transforms.Resize((256, 256))RandomCrop(size, paddingNone): 随…...

抖音手机实景无人直播间怎么搭建?

手机无人直播已成为用户直播和商家直播带货的一项热门技术趋势&#xff0c;为消费者提供了全新的观看体验。无人直播&#xff0c;顾名思义&#xff0c;即通过无人直播软件或数字人来进行无人直播。这一技术的广泛应用&#xff0c;不仅为短视频渠道带来了更丰富的玩法&#xff0…...

【新书推荐】当 Python 遇到 ChatGPT —— 自动化办公落地

文章目录 当 Python 遇到 ChatGPT&#xff1a;一种强大的组合1. 文本生成2. 自动翻译3. 对话生成4. 情感分析 新书推荐《Python自动化办公应用大全&#xff08;ChatGPT版&#xff09;&#xff1a;从零开始教编程小白一键搞定烦琐工作&#xff08;上下册&#xff09;》前言内容简…...

RSA攻击:Smooth攻击

目录 前言&#xff1a;缘起 P-1光滑攻击 P1光滑攻击 前缀知识 Lucas-Subsquence(卢卡斯序列) 编码实现与理解 小试牛刀 [NCTF 2019]childRSA 引用 前言&#xff1a;缘起 Smooth攻击(光滑攻击)&#xff0c;在最近刷题的时候总是能偶尔蹦跶到我的脑子里面。不是天天遇见它&am…...

什么是位域和位段?如何定义和使用位域?

位域&#xff08;Bit Fields&#xff09;是C语言中一种用于在数据结构中以位为单位对数据进行精确控制的技术。它们允许程序员将一个整数字段分割成多个更小的部分&#xff0c;每个部分可以存储不同的信息。位域通常在对内存节省要求高、数据压缩或硬件寄存器描述等情况下使用。…...

网络攻防备课笔记

从“踩点”到“创建后门”的攻击流程 踩点&#xff1a;攻击者在实施攻击前对目标进行初步的探索和调查的过程&#xff0c;包括收集目标的IP地址、开放的端口、服务版本、可能的漏洞等信息。 扫描&#xff1a;使用工具如Nmap、Masscan等对目标进行端口扫描&#xff0c;找出开放…...

Apache Solr9.3 快速上手

Apache Solr 简介 Solr是Apache的顶级开源项目&#xff0c;使用java开发 &#xff0c;基于Lucene的全文检索服务器。 Solr比Lucene提供了更多的查询语句&#xff0c;而且它可扩展、可配置&#xff0c;同时它对Lucene的性能进行了优化。 安装 下载 : 下载地址解压 : tar -zxv…...

按关键字搜索淘宝商品API接口获取商品销量、优惠价、商品标题等参数示例

关键词搜索商品接口的作用是提供搜索功能&#xff0c;让用户根据关键词在电商平台上搜索商品&#xff0c;并根据搜索条件和偏好获取相关的商品列表和推荐结果&#xff0c;提高用户购物体验和准确度。对于电商平台而言&#xff0c;这个接口也能帮助用户发现更多商品、提升销量和…...

【外汇天眼】价格波动的节奏感:优化止盈方法!

止盈&#xff0c;依然是一种经验&#xff0c;而不是一种技术。它涉及到价格波动的灵活应对&#xff0c;以确保我们不会错失潜在的盈利&#xff0c;同时也不会让盈利被逆市波动所侵蚀。以下是关于如何有效实施止盈策略的一些建议&#xff1a; 首先&#xff0c;我们要明确&#…...

VMvare虚拟机安装国产麒麟V10桌面操作系统

一、系统下载 进入银河麒麟官网&#xff1a;https://www.kylinos.cn/ 选择桌面操作系统&#xff0c;然后进入操作系统版本选择页面&#xff0c;选择银河麒麟桌面操作系统V10 选择后&#xff0c;进入系统介绍页面&#xff0c;然后点击申请试用 点击后进入申请页面&#xf…...

Golang--channel+waitGroup控制并发量

文章目录 channelwaitGroup控制并发量前言示例 channelwaitGroup控制并发量 前言 golang的goroutine非常轻量级&#xff0c;同时启动数万协程都没问题。如果不对并发量进行控制&#xff0c;比如同时产生数百万的协程&#xff0c;会压垮服务器通过控制channel缓冲区的大小&…...

前端【响应式图片处理】之 【picture标签】

目录 &#x1f31f;前言&#x1f31f;目前最常见的解决方案&#x1f31f;新的解决方案<picture>&#x1f31f;<picture>的工作原理&#x1f31f;<picture> 兼容性解决方案&#x1f31f;写在最后 &#x1f31f;前言 哈喽小伙伴们&#xff0c;前端开发过程中经…...

js实现链式调用,查询和处理数据

实现一个 query 方法&#xff0c;实现对数据的链式查询和处理 要求如下 query 传入参数为原始数据&#xff08;数组格式&#xff0c;每个元素都是对象&#xff09; 通过进行链式调用对数据执行操作&#xff0c;支持的方法有where(predicate): 根据参数的条件进行筛选&#xff0…...

阿里云 腾讯云 配置二级域名并解析指向非80端口操作指南

目标&#xff1a;主域名 imps.com 已完成配置&#xff0c;新增配置 kpi.imps.com 等二级域名并指向 8083 端口。 &#xff08;此操作需要主域名已经通过备案3天后&#xff0c;最好指向的IP地址网站也通过了备案申请&#xff0c;否则会提示域名没有备案。&#xff09; 操作流程…...

菜单子节点的写法

菜单子节点的写法 1.测试数据2.实现代码3.获取父ID层级 1.测试数据 1.表结构SQL CREATE TABLE test (id int DEFAULT NULL,u_id int DEFAULT NULL,p_u_id int DEFAULT NULL ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_general_ci;2.数据SQL INSERT INTO test (i…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...