主题:山茶花指挥舱大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<div class="baseBoxRight right"> <ul class="plant"> <li> <a class="jumps" href=""> <div> <span>茶园种植面积(亩)</span> <img src="./img/qqzmj.png" alt=""> </div> <p class="">350000</p> <span class="spans3"></span> </a> </li> <li> <a class="jumps" href=""> <div> <span>产值(亿元)</span> <img src="./img/ccc2.png" alt=""> </div> <p class="">180</p> <span class="spans2" style="background: #499BFF;"></span> </a> </li> <li> <a class="jumps" href=""> <div> <span>产量(吨)</span> <img src="./img/ccc.png" alt=""> </div> <p class="">82000</p> <span class="spans3" style="background: #F2CE43;"></span> </a> </li> <li> <a class="jumps" href="./teaGarden.html"> <div class="clear plantTop "> <span class="flexLeft">茶园(个)</span> <img class="flexright" src="./img/cy.png" alt=""> </div> <p class=" plantNum1">3207</p> <span class="spans0"></span> </a> </li> <li> <a class="jumps" href="./Tea-enterprises.html"> <div class="clear plantTop "> <span class="flexLeft">茶企(个)</span> <img class="flexright" src="./img/cq.png" alt=""> </div> <p class=" plantNum1">157</p> <span class="spans1"></span> </a> </li> <li> <a class="jumps" href="./teaPeasant.html"> <div> <span>茶农(人)</span> <img src="./img/cn.png" alt=""> </div> <p class="">360000</p> <span class="spans2"></span> </a> </li>
部分CSS代码
.centerBottom .dataTransmissionTitle { position: relative; display: flex; align-items:center; width: 95%; height: 13%; margin-left: 2.5%; margin-top: .7vw; background-color: #223B5A; color: #11F9FD; } .centerBottom .dataTransmissionTitle .first { /* float: left; */ text-align: center; /* display: inline-block; */ /* width: 14%; */ /* height: 100%; */ /* background-color: red; */ font-size: .7vw; margin-left: .7vw; } .dataTransmissionTitle .rightContent { margin-left: 1vw;} .centerBottom .dataTransmissionTitle .centertTitle{ position: absolute; font-size: .4vw;} .centerBottom .dataTransmissionTitle .centertTitleTop{ top: .3vw;} .centerBottom .dataTransmissionTitle .centertTitleBottom{ top: 1.3vw;} .centertTitle .point { position: absolute; left: .8vw; top: .15vw; display: inline-block; width: .2vw; height: .2vw; background-color: #0EFAFC; } .squareBox { display: flex; justify-content: center; align-items: center; /* margin-left: .5vw; */ float: left; width: 1.7vw; height: 1.7vw; background-color: #1F2C3F; } .squareBox .transformBox { display: inline-block; width: .3vw; height: .3vw; border: 3px solid #0EFAFC; /* background-color: #11F9FD; */ transform:rotate(45deg); transform:rotate(45deg); transform:rotate(45deg); transform:rotate(45deg); transform:rotate(45deg); }
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
