主题:人口医疗数据分析大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<div class="leftMain_middle_right"> <div class="leftMain_middle_rightIn"> <h3>疾病致死率(1/10万)</h3> <div class="biaoge biaoge_pai" style="width:100%; height:25vh"> <div class="biaoge_paiIn"> <ul> <li> <div class="liIn liIn5"> <div class="liIn_left"><span class="bot"></span><span class="zi">心脏病</span></div> <div class="liIn_line"><div class="line_lineIn" style="width:92.5%;"></div></div> <p class="num">165.37</p> </div> </li> <li> <div class="liIn liIn4"> <div class="liIn_left"><span class="bot"></span><span class="zi">恶性肿瘤 </span></div> <div class="liIn_line"><div class="line_lineIn" style="width:89.5%;"></div></div> <p class="num">158.70</p> </div> </li> <li> <div class="liIn liIn2"> <div class="liIn_left"><span class="bot"></span><span class="zi">脑血管病 </span></div> <div class="liIn_line"><div class="line_lineIn" style="width:85.5%;"></div></div> <p class="num">140.02</p> </div> </li> <li> <div class="liIn liIn3"> <div class="liIn_left"><span class="bot"></span><span class="zi">寄生虫病 </span></div> <div class="liIn_line"><div class="line_lineIn" style="width:28.5%;"></div></div> <p class="num">68.5</p> </div> </li> <li> <div class="liIn"> <div class="liIn_left"><span class="bot"></span><span class="zi">传染病</span></div> <div class="liIn_line"><div class="line_lineIn" style="width:5%;"></div></div> <p class="num">5.30</p>
部分CSS代码
.bg{ margin:0 auto; width:100%; min-height:100vh; background:url(../images/bg2.jpg) no-repeat; background-size: cover; padding-top:0rem; padding:0rem 0.2rem; } .border_bg_leftTop{ position:absolute; left:-0.008rem; top:-0.04rem; width:0.37rem; height:0.05rem; display:block; background:#01279d url(../images/title_left_bg.png) no-repeat; background-size:cover;} .border_bg_rightTop{ position:absolute; right:-0.01rem; top:-0.01rem; width:0.1rem; height:0.1rem; display:block; background:url(../images/border_bg.jpg) no-repeat; background-size:cover;} .border_bg_leftBottom{ position:absolute; left:-0.008rem; bottom:-0.008rem; width:0.1rem; height:0.1rem; display:block; background:url(../images/border_bg.jpg) no-repeat; background-size:cover;} .border_bg_rightBottom{ position:absolute; right:-0.01rem; bottom:-0.01rem; width:0.08rem; height:0.08rem; display:block; background:url(../images/title_right_bg.png) no-repeat; background-size:cover;} .leftMain{ width:75%; float:left; padding-right:0.1rem; padding-top:0.1rem; }
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
