主题:数字化茶叶大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<div class="main_m"> <div class="main_m_t"> <div class="item1"> <p data-ride="numberGrow25" data-value="6551" data-time="3" data-digit="2">6551</p> <span>茶农 (户)</span> <p data-ride="numberGrow25" data-value="150.6" data-time="3" data-digit="2">150.6</p> <span>经纪人(家)</span> </div> <div class="item1"> <p data-ride="numberGrow25" data-value="85" data-time="3" data-digit="2">85</p> <span>茶企 (家)</span> <p data-ride="numberGrow25" data-value="65.8" data-time="3" data-digit="2">65.8</p> <span>加工点(家)</span> </div> <div class="item1"> <p data-ride="numberGrow25" data-value="14374.64" data-time="3" data-digit="2">14,374.64</p> <span>茶园总面积 (万亩)</span> <p data-ride="numberGrow25" data-value="35.40" data-time="3" data-digit="2">35.40</p> <span>交易额 (亿元)</span> </div> <div class="item1"> <p data-ride="numberGrow25" data-value="338029.51" data-time="3" data-digit="2">338,029.51</p> <span>交易产量 (万吨)</span> <p data-ride="numberGrow25" data-value="2.4576" data-time="3" data-digit="2">2.4576</p> <span>溯源码量 (个)</span> </div> </div> <div class="eject control"> <div class="close"></div> <div class="infor"> <h2><img src="static/picture/address.png" alt=""><span class="areaname">地区名称</span></h2> <div class="con_text"> <p>茶农(户):<span>152</span></p> <p>茶企(家):<span>152</span></p> <p>茶园面积(千克):<span>152</span></p> <p>预测产量(户):<span>152</span></p> <p>当年实际产量(千克):<span>152</span></p> <p>当年溯源产量(千克):<span>152</span></p> <p>茶叶产值</p> </div> </div> <div class="line5">
部分css代码
.content { width: 100%; background: url(../images/bg_02.jpg) center no-repeat; background-size: 100% 100%; padding-top: 0.175rem; padding-bottom: 0.55rem; box-sizing: border-box; } .content .header {width: 100%;height: 1.05rem;padding: 0 0.375rem;display: flex;justify-content: space-between; box-sizing: border-box; } .content .header .header_l { width: 5.625rem;} .content .header .header_l ul {width: 100%;height: 1.05rem;padding-top: 0.225rem;display: flex; box-sizing: border-box; } .content .header .header_l ul li {width: 1.475rem;height: 0.6rem;background: url(../images/header-2.png) center no-repeat;background-size: 100% 100%; margin-right: 0.25rem; } .content .header .header_l ul li a {width: 100%;height: 100%;display: flex;align-items: center; justify-content: center; }
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
