目录
一、什么是可视化
可视化是利用计算机图形学和 图像处理 技术,将数据转换成图形或图像在屏幕上显示出来,并进行交互处理的理论、方法和技术。
可视化能够通过图像图像来更好的查看数据。
可视化项目通常在业务报告,地铁线路图,医院的大屏,气象地图,金融投资等等一些地方可以看到。
二、可视化项目的详解
1.可视化项目图片
该项目用到了一个ECharts开源可视化库,底层依赖矢量图形库,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
ECharts教程:快速上手 - 使用手册 - Apache ECharts
<script src="/https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
还有开源可视化图库网站:https://www.isqqw.com/

这里适配了三种屏幕尺寸:
1024px适配小屏幕
1024px~1920px适配pc端
1920px适配大屏幕
项目的布局分为上下两部分,上为logo标题,下位可视化主体部分
可视化主体部分又分为左中右三部分
2.左边部分
左边部分分为三个盒子,其中重点是监控区域和点位分布图区域
1.监控部分
<style>
.myfaultlist {
margin-left: 1vw;
margin-top: -1vw;
height: 20vw;
overflow: hidden;
.faultmar {
animation: animat 15s linear infinite;
&:hover{
animation-play-state: paused;
}
.row {
display: flex;
padding: 0.7vw 1vw;
.col {
font-size: 0.08rem;
}
}
}
}
@keyframes animat {
0%{
transform:translateY(0);
}
100%{
transform: translateY(-50%);
}
}
<style>
<div class="fault">
<div class="faultbtn">
<a href="javascript:;" class="active">故障设备监控</a>
<a href="javascript:;">异常设备监控</a>
</div>
<div class="faultlist" style="display: block;">
<div class="faulttitlebg"></div>
<div class="faulttitle">
<div class="col">故障时间</div>
<div class="col">设备地址</div>
<div class="col">异常代码</div>
</div>
<div class="myfaultlist">
<div class="faultmar">
<div class="row">
<div class="col">20180701</div>
<div class="col">11北京市昌平西路金燕龙写字楼</div>
<div class="col">1000001</div>
</div>
<div class="row">
<div class="col">20190601</div>
<div class="col">北京市昌平区城西路金燕龙写字楼</div>
<div class="col">1000002</div>
</div>
<div class="row">
<div class="col">20190704</div>
<div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
<div class="col">1000003</div>
</div>
<div class="row">
<div class="col">20180701</div>
<div class="col">北京市昌平区建路金燕龙写字楼</div>
<div class="col">1000004</div>
</div>
<div class="row">
<div class="col">20190701</div>
<div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
<div class="col">1000005</div>
</div>
<div class="row">
<div class="col">20190701</div>
<div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
<div class="col">1000006</div>
</div>
<div class="row">
<div class="col">20180701</div>
<div class="col">北京市昌平区建西路金燕龙写字楼</div>
<div class="col">1000007</div>
</div>
<div class="row">
<div class="col">20180701</div>
<div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
<div class="col">1000008</div>
</div>
<div class="row">
<div class="col">20180701</div>
<div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
<div class="col">1000009</div>
</div>
<div class="row">
<div class="col">20180710</div>
<div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
<div class="col">1000010</div>
</div>
</div>
</div>
</div>
<div class="faultlist">
<div class="faulttitlebg"></div>
<div class="faulttitle">
<div class="col">异常时间</div>
<div class="col">设备地址</div>
<div class="col">异常代码</div>
</div>
<div class="myfaultlist">
<div class="faultmar">
<div class="row">
<div class="col">20180701</div>
<div class="col">11北京市昌平西路金燕龙写字楼</div>
<div class="col">1000001</div>
</div>
<div class="row">
<div class="col">20190601</div>
<div class="col">北京市昌平区城西路金燕龙写字楼</div>
<div class="col">1000002</div>
</div>
<div class="row">
<div class="col">20190704</div>
<div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
<div class="col">1000003</div>
</div>
<div class="row">
<div class="col">20180701</div>
<div class="col">北京市昌平区建路金燕龙写字楼</div>
<div class="col">1000004</div>
</div>
<div class="row">
<div class="col">20190701</div>
<div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
<div class="col">1000005</div>
</div>
<div class="row">
<div class="col">20190701</div>
<div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
<div class="col">1000006</div>
</div>
<div class="row">
<div class="col">20180701</div>
<div class="col">北京市昌平区建西路金燕龙写字楼</div>
<div class="col">1000007</div>
</div>
<div class="row">
<div class="col">20180701</div


3194

被折叠的 条评论
为什么被折叠?



