主题:农业指挥舱可视化大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<div class="centerBox"> <div class="baseBox centerMainBox1" style="height:70%"> <div class="baseBoxLeft left"> <div class="boxTitle">茶叶病虫害预警</div> <img src="img/left.png" class="first_border" alt=""> <div class="firstBox"> <div class="pic"> <img src="img/demo_pic.png" class="first_top1" alt=""> <img src="img/data_pic.png" class="first_top2" alt=""> </div> <div class="picText"> <span>样本图片</span> <span class="text_second">茶叶病虫害大数据库</span> </div> <div class="voice_animation"> <canvas id="canvas">Your browser can not support canvas</canvas> </div> <div class="progress"> <span class="disease">茶饼病</span> <!-- <i class="counter-value">85</i>% --> <span class="similar">相似度:85%</span> <img src="img/progress.gif" alt=""> </div> <div class="about_illness"> <div class="symptom"> <div class="symptom_title">病症症状</div> <div class="symptom_content">本模板收集于网络，无需任何付费操作 </div> </div> <div class="prevent"> <div class="prevent_title">防治方法</div> <div class="prevent_content"> </div> </div> </div> </div> </div>
部分CSS代码
.first_top1 { margin-left: 1vw;} .first_top2 { margin-left: 1vw;} .picText { color: #0EFCFF; margin-left: 1vw;} .picText .text_second { margin-left: 6vw;} /* 声波动画start--- */ .voice_animation { width: 100%; height: 20%; margin-top: 1vw; background-image: url(../img/voice_pic.png); background-size: 90% 90%; background-repeat: no-repeat; background-position: center; } /* 进度条start--- */ .progress { width: 93%; height: 10%; margin-top: 1vw; margin-left: .6vw; background-image: url(../img/progress_pic.png); background-size: 100% 100%; } /* 进度条over--- */ .about_illness { width: 100%; height: 25%; margin-top: 1.5vw; margin-left: .6vw; color: #fff; font-size: .6vw; } .about_illness>div { display: inline-block; width: 45%; height: 100%; background-image: url(../img/illness_pic.png); background-size: 100% 100%; } .prevent { margin-left: .5vw; text-indent: .2vw;} .symptom {/* text-indent: .2vw; */ /* font-size: .5vw; */} .symptom_content, .prevent_content { color: #0EFCFF; margin-top: .5vw; margin: .6vw .2vw .2vw .5vw; } .symptom_title .prevent_title {font-size: .1vw;color: red;} @keyframes mymove { 0% { transform: scale(1); /*开始为原始大小*/ } 25% { transform: scale(1.1); /*放大1.1倍*/ } 50% { transform: scale(1.05); } 75% { transform: scale(1); } } @keyframes myfirst { 0% { left: 250px; top: 0px; } 25% { left: 300px; top: 0px; } 50% { left: 150px; top: 300px; } 75% { left: 250px; top: 200px; } 100% { left: 250px; top: 0px; }} @-moz-keyframes myfirst /* Firefox */ { 0% { left: 250px; top: 0px; } 25% { left: 300px; top: 0px; } 50% { left: 500px; top: 200px; } 75% { left: 250px; top: 200px; } 100% { left: 250px; top: 0px; } }
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
