主题:数字化学校大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<div style="display:none" class="panel line2_a"> <h2> 报告厅预约统计 </h2> <div class="chart" style="height: 2.8rem; margin-top: 0.15rem; left: 0.55rem; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <div style="position: relative; width: 0px; height: 218px; padding: 0px; margin: 0px; border-width: 0px;"> <canvas data-zr-dom-id="zr_0" width="0" height="218" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 218px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas> </div> </div> <div class="panel-footer"></div> </div> <div class="panel line2_b"> <h2> 困难认定学院统计 </h2> <div class="chart" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <div style="position: relative; width: 271px; height: 234px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"> <canvas data-zr-dom-id="zr_0" width="271" height="234" style="position: absolute; left: 0px; top: 0px; width: 271px; height: 234px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas> </div> </div> <div class="panel-footer"></div> </div> <div class="panel line1_f"> <h2> 请假审批完成率 </h2> <div class="chart" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <div style="position: relative; width: 271px; height: 234px; padding: 0px; margin: 0px; border-width: 0px;"> <canvas data-zr-dom-id="zr_0" width="271" height="234" style="position: absolute; left: 0px; top: 0px; width: 271px; height: 234px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas> </div> </div> <div class="panel-footer"></div> </div> <div style="display:none" class="panel line2_c"> <h2> </h2> <div class="chart" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;"> <div style="position: relative; width: 0px; height: 234px; padding: 0px; margin: 0px; border-width: 0px;"> <canvas data-zr-dom-id="zr_0" width="0" height="234" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 234px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas> </div> <div class=""></div> </div> <div class="panel-footer"></div> </div> </div>
部分CSS代码
body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; /* 背景图定位 / 背景图尺寸 cover 完全铺满容器 contain 完整显示在容器内 */ background: url("./img/bg.jpg") no-repeat #000; background-size: cover; /* 行高是字体1.15倍 */ line-height: 1.15; } header { position: relative; height: 1.25rem; background: url("./img/head_bg.png")no-repeat top center; background-size: 100% 100%; } header h1 { font-size: 0.3rem; color: #00ccff; text-align: center; line-height: 1.2rem; margin-left: 1.8625rem; } header .menu { position: absolute; top: 0.1875rem; left: 5.7875rem; font-size: 0.2rem; } header .menu a.selected { background: url("./img/menu.png") no-repeat; background-position: 0.125rem 0.1875rem; background-size: 1.475rem 0.4125rem; } header .menu :hover { background: url("./img/menu.png")no-repeat; background-position: 0.125rem 0.1875rem; background-size: 1.475rem 0.4125rem; }
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
