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

本文主要是介绍漏刻有时数据可视化大屏(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和柱图折线图混排的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/173143

相关文章

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

Redis 中的热点键和数据倾斜示例详解

《Redis中的热点键和数据倾斜示例详解》热点键是指在Redis中被频繁访问的特定键,这些键由于其高访问频率,可能导致Redis服务器的性能问题,尤其是在高并发场景下,本文给大家介绍Redis中的热... 目录Redis 中的热点键和数据倾斜热点键(Hot Key)定义特点应对策略示例数据倾斜(Data S

Python实现将MySQL中所有表的数据都导出为CSV文件并压缩

《Python实现将MySQL中所有表的数据都导出为CSV文件并压缩》这篇文章主要为大家详细介绍了如何使用Python将MySQL数据库中所有表的数据都导出为CSV文件到一个目录,并压缩为zip文件到... python将mysql数据库中所有表的数据都导出为CSV文件到一个目录,并压缩为zip文件到另一个

SpringBoot整合jasypt实现重要数据加密

《SpringBoot整合jasypt实现重要数据加密》Jasypt是一个专注于简化Java加密操作的开源工具,:本文主要介绍详细介绍了如何使用jasypt实现重要数据加密,感兴趣的小伙伴可... 目录jasypt简介 jasypt的优点SpringBoot使用jasypt创建mapper接口配置文件加密

使用Python高效获取网络数据的操作指南

《使用Python高效获取网络数据的操作指南》网络爬虫是一种自动化程序,用于访问和提取网站上的数据,Python是进行网络爬虫开发的理想语言,拥有丰富的库和工具,使得编写和维护爬虫变得简单高效,本文将... 目录网络爬虫的基本概念常用库介绍安装库Requests和BeautifulSoup爬虫开发发送请求解

Oracle存储过程里操作BLOB的字节数据的办法

《Oracle存储过程里操作BLOB的字节数据的办法》该篇文章介绍了如何在Oracle存储过程中操作BLOB的字节数据,作者研究了如何获取BLOB的字节长度、如何使用DBMS_LOB包进行BLOB操作... 目录一、缘由二、办法2.1 基本操作2.2 DBMS_LOB包2.3 字节级操作与RAW数据类型2.

MySQL使用binlog2sql工具实现在线恢复数据功能

《MySQL使用binlog2sql工具实现在线恢复数据功能》binlog2sql是大众点评开源的一款用于解析MySQLbinlog的工具,根据不同选项,可以得到原始SQL、回滚SQL等,下面我们就来... 目录背景目标步骤准备工作恢复数据结果验证结论背景生产数据库执行 SQL 脚本,一般会经过正规的审批