HTML+CSS+JS实现 ❤️echarts大数据统计图表实例❤️
2024-06-04 17:52:00
效果演示： 文末获取源码
代码目录：
主要代码实现：
HTML代码 :
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><style type="text/css">body {background-image: url(images/nybj.png);background-size: 100% 100%;font-weight: bold;font-family: 苹方;overflow: hidden;}.main {width: 1024px;height: 768px;position: relative;margin: auto;}div {border: 0px solid white;margin: 1px;}.layer {position: relative;width: 100%;}#layer01 {}#layer01 img {text-align: center;display: block;height: 35px;padding-top: 35px;margin: auto;}#layer02>div {height: 100%;float: left;position: relative;}.layer02-data {position: absolute;width: auto;height: 100px;color: white;top: 45px;left: 65px;}.layer03-panel {height: 100%;position: relative;float: left;}.layer03-left-label {position: absolute;}#layer03_left_label01 {top: 10px;left: 10px;color: white;height: 20px;width: 200px;font-weight: bold;}#layer03_left_label02 {right: 10px;top: 10px;color: #036769;height: 20px;width: 200px;}.layer03-left-chart {position: relative;float: left;height: 100%;}#layer03_right_label {position: absolute;top: 10px;left: 10px;color: white;height: 20px;width: 100px;}.layer03-right-chart {position: relative;float: left;height: 100%;width: 32%;}.layer03-right-chart-label {color: white;text-align: center;position: absolute;bottom: 60px;width: 100%;}.layer04-panel {position: relative;float: left;height: 100%;width: 48%;}.layer04-panel-label {width: 100%;height: 15%;color: white;padding-top: 5px;}.layer04-panel-chart {width: 100%;height: 85%;}</style><script src="jquery.min.js"></script><script src="echarts.min.js"></script><script src="monitor.js"></script><script type="text/javascript">$(function() {drawLayer02Label($("#layer02_01 canvas").get(0), "接入终端数量", 80, 200);drawLayer02Label($("#layer02_02 canvas").get(0), "今日接入数据数量", 80, 300);drawLayer02Label($("#layer02_03 canvas").get(0), "今日新增存储数据", 80, 400);drawLayer02Label($("#layer02_04 canvas").get(0), "总存储数据", 50, 200);drawLayer02Label($("#layer02_05 canvas").get(0), "当前任务个数", 40, 200);drawLayer02Label($("#layer02_06 canvas").get(0), "当前集群数", 50, 200);renderLegend();//饼状图renderChartBar01();//renderChartBar02();//存储renderLayer03Right();//30天日均线流量趋势renderLayer04Left();//集群性能renderLayer04Right();});</script><title>TIZA STAR大数据运维总览图</title>
</head><body><div class="main"><div id="layer02" class="layer" style="height:15%;"><div id="layer02_01" style="width:20%;"><div class="layer02-data"><span style="font-size:26px;">400000</span><span style="font-size:16px;">台</span></div><canvas width="200" height="100"></canvas></div><div id="layer02_02" style="width:20%;"><div class="layer02-data"><span style="font-size:26px;">400000</span><span style="font-size:16px;">KB</span></div><canvas width="200" height="100"></canvas></div><div id="layer02_03" style="width:21%;"><div class="layer02-data"><span style="font-size:26px;">31457280</span><span style="font-size:16px;">MB</span></div><canvas width="200" height="100"></canvas></div><div id="layer02_04" style="width:12%;"><div class="layer02-data"><span style="font-size:26px;">50</span><span style="font-size:16px;">PB</span></div><canvas width="120" height="100"></canvas></div><div id="layer02_05" style="width:12%;"><div class="layer02-data"><span style="font-size:26px;">25</span><span style="font-size:16px;">个</span></div><canvas width="120" height="100"></canvas></div><div id="layer02_06" style="width:12%;"><div class="layer02-data"><span style="font-size:26px;">5</span><span style="font-size:16px;">个</span></div><canvas width="120" height="100"></canvas></div></div><div id="layer03" class="layer" style="height:40%;"><div id="layer03_left" style="width:48%;" class="layer03-panel"><div id="layer03_left_label01" class="layer03-left-label">接入机型占比</div><!--<div id="layer03_left_label02" class="layer03-left-label">(左)在线数量 (右)上线率</div>--><div id="layer03_left_01" class="layer03-left-chart" style="width:16%;"><canvas width="100" height="200" style="margin:30px 0 0 20px;"></canvas></div><div id="layer03_left_02" class="layer03-left-chart" style="width:80%;"></div><!--<div id="layer03_left_03" class="layer03-left-chart" style="width:80%;"></div>--></div><div id="layer03_right" style="width:50%;" class="layer03-panel"><div id="layer03_right_label">存储</div><div id="layer03_right_chart01" class="layer03-right-chart"><canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas><div class="layer03-right-chart-label">Hdfs</div></div><div id="layer03_right_chart02" class="layer03-right-chart"><canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas><div class="layer03-right-chart-label">Rdbms</div></div><div id="layer03_right_chart03" class="layer03-right-chart"><canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas><div class="layer03-right-chart-label">Rdies</div></div></div></div><div id="layer04" class="layer" style="height:30%;"><div id="layer04_left" class="layer04-panel"><div id="layer04_left_label" class="layer04-panel-label">30天日均线流量趋势</div><div id="layer04_left_chart" class="layer04-panel-chart"></div></div><div id="layer04_right" class="layer04-panel"><div id="layer04_right_label" class="layer04-panel-label"><span>集群性能/</span><span style="color:#00A09A;">近一个小时</span></div><div id="layer04_right_chart" class="layer04-panel-chart"></div></div></div></div>
</body></html>上面的图片文件和js文件需要引入
源码获取
查看博主主页或私信博主获取
精彩推荐更新中：
HTML5大作业实战100套
打卡 文章 更新 42 / 100天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件或技术资料点击下方微信获取~！
HTML+CSS+JS实现 ❤️echarts大数据统计图表实例❤️相关推荐
- Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
- Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路
Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...
- Hadoop+hive+flask+echarts大数据可视化之系统数据收集
Hadoop+hive+flask+echarts大数据可视化项目(一) --------------系统数据收集---------------- 谈到大数据的项目,一般以数据可视化为主体,收集大数据 ...
- Hadoop+hive+flask+echarts大数据可视化项目之系统数据整合和hadoop环境搭建
Hadoop+hive+flask+echarts大数据可视化项目(二) --------------系统数据整合和hadoop环境搭建---------------- 关注Hadoop+Hive+F ...
- 使用阿里云优惠券轻松享受超强性能大数据型实例
阿里云优惠券已可以支持购买阿里云服务器大数据型实例,此实例专为Hadoop分布式计算.海量日志处理和大型数据仓库等大数据业务场景而设计,提供ECS实例中最优性价比的磁盘吞吐能力和单位存储容量,解决企业 ...
- 百度智能云服务器大数据型实例族应用场景及规格参数介绍
大数据型d1s规格族特点 处理器:Intel Xeon Platinum 6271,主频 2.6GHz 处理器与内存配比为1:4 实例配备大容量高吞吐的SATA HDD本地盘 最高可支持25Gbps内 ...
- 大数据综合实例—陌陌聊天数据分析
大数据综合实例-陌陌聊天数据分析 1. 需求分析 数据大小:14万条 列分隔符:制表符 \t 2. 建库建表与加载数据 建库 --------------1.建库------------------- ...
- D3.js、echar.js 前端必备大数据技能
大数据可视化 「 前言 」 web前端一直都是个讲究门面和艺术美感的行业,如果你以为逻辑很强就够了,那就错了,你只适合做后端,真正的好前端是对美感和可视化的东西有一种接近痴狂的爱好,这种契机可以驱使你 ...
- Echarts大数据可视化物流航向省份流向迁徙动态图，开发全解+完美参数注释
最近在研究Echarts的相关案例,毕竟现在大数据比较流行,比较了D3.js.superset等相关的图表插件,还是觉得echarts更简单上手些. 本文是以原生JS为基础,如果使用Vue.js的话, ...
最新文章
- 智能手表音频特性测试_智能手表和传统手表怎么选？有这些需求选它更合适
- 一天搞定HTML----a标签02
- mac 用户 文件夹 权限_这可能是 Mac 共享文件最详细的教程了
- linux磁盘混乱,Linux磁盘设备文件混乱源于Linux内核自身
- 索引对mysql行锁和表锁影响
- 配置鸿蒙Windows烧录环境 用Hiburn烧录第一个程序
- Java 是如何优雅地实现接口数据校验的？
- OpenCV threshold 二值化
- Gridlayout
- 怎样远程连接Access数据库
- 手持式矢量网络分析仪
- python网易公开课官网_[Python][爬虫]网易公开课下载器，支持多线程，可分别下载视频及字幕...
- 解决方案：rabbitmq使用场景-超时未支付订单处理
- 最新Django经典面试问题与答案汇总
- python—简单的数据抓取一（简单的文字数据抓取(认识cookie)、简单的图片抓取）
- Pollard Rho算法
- Eric S. Raymond 五部曲 之 《开拓智域》
- 如何一秒将 iPhone 屏幕变成 S8
- 最近一直在被螺旋槽成型铣刀的计算折磨着
- 2022 Apache IoTDB 物联网生态大会 | 议题嘉宾公布，大会亮点抢先看！
热门文章
- cmd窗口使用python提示“Python not found”，可能是环境变量配置的原因
- linux vnc 改端口号,基于Linux中vnc配置端口号的修改方法
- python 多关键字匹配_使用django的objects.filter()方法匹配多个关键字的方法
- 如何更改电脑ip地址租期_局域网通过IP地址如何找到电脑的位置
- 英特尔显示器音频_英特尔也玩马甲？有关USB TypeC的冷知识你了解多少
- python代码没有反应_没有任何编程经验者不要被Python简明手册误导。
- 进入hbase命令_Zookeeper、Hbase安装部署
- GPS无线视频服务器,宏电环卫车无线视频监控与GPS定位系统设计方案.docx
- Outlook2016怎么修改默认数据库
- 单行文字、多行文字溢出时省略号表示的多种解决方式；调整字符间距；段落首字母大写缩进效果；