主题:英雄联盟可视化大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<div class="mainbox"> <ul class="clearfix"> <li> <div class="boxall" style="height:400px;"> <div class="alltitle">个人数据堆叠图</div> <div class="navboxall" id="echart5"></div> </div> <div class="boxall" style="height:260px;"> <div class="alltitle">英雄数据轮播</div> <div class="navboxall"> <div class="wraptit"> <span>英雄名</span><span>出场次数</span><span>Pick比率</span><span>胜率</span> </div> <div class="wrap"> <ul> <li> <p><span>寒冰射手</span><span>205</span><span>56%</span><span>51%</span></p> </li> <li> <p><span>残月之肃</span><span>159</span><span>47%</span><span>57%</span></p> </li> <li> <p><span>深海泰坦</span><span>164</span><span>38%</span><span>53%</span></p> </li> <li> <p><span>探险家</span><span>137</span><span>37%</span><span>50%</span></p> </li> <li> <p><span>法外狂徒</span><span>135</span><span>36%</span><span>49%</span></p> </li> <li> <p><span>盲僧</span><span>135</span><span>36%</span><span>53%</span></p> </li> <li> <p><span>巨魔之王</span><span>124</span><span>33%</span><span>45%</span></p> </li> <li> <p><span>不灭狂雷</span><span>124</span><span>33%</span><span>45%</span></p> </li> <li> <p><span>山隐之焰</span><span>122</span><span>33%</span><span>47%</span></p> </li> <li> <p><span>欧豪</span><span>109</span><span>29%</span><span>43%</span></p> </li>
部分CSS代码
.wraptit { border-bottom: 1px solid rgba(255, 255, 255, .2); padding: 0 0 10px 0; margin-bottom: 10px; } .iconchart .bar span { background: linear-gradient(to right, #588fab, #5ea99c); display: block; width: 60%; height: 100%; animation: myfirst2 1s ease; } .numtxt { color: #fef000; font-size: 80px; font-family: arial; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 10px 0; margin: 18px 0; font-weight: bold; letter-spacing: 2px; } .table1 th { border-bottom: 1px solid rgba(255, 255, 255, 1); font-size: 16px; color: rgba(255, 255, 255, 1); font-weight: normal; padding: 0 0 10px 0; text-align: center } .weather span { color: rgba(255, 255, 255, .9) !important; font-size: 24px; font-family: DS-Digital } .loading { position: fixed; left: 0; top: 0; font-size: 16px; z-index: 100000000; width: 100%; height: 100%; background: #1a1a1c; text-align: center; } .loadbox { position: absolute; width: 160px; height: 150px; color: rgba(255, 255, 255, .6); left: 50%; top: 50%; margin-top: -100px; margin-left: -75px; }
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
