主题:智慧医疗可视化大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<!--统计分析图--> <div class="div_any"> <div class="left div_any01"> <div class="div_any_child"> <div class="div_any_title"><img src="../images/title_1.png">各医院采集数据量</div> <p id="pieChart1" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><img src="../images/title_2.png">各医院门诊住院费用</div> <p id="histogramChart" class="p_chart"></p> </div> </div> <div class="div_any02 left "> <div class="div_any_child div_height"> <div class="div_any_title any_title_width"><img src="../images/title_0.png">厦门市地图 </div> <div id="mapChart" style="width:97.5%;height:95%;display: inline-block;padding-left: 1.25%;padding-top:2.2%"></div> </div> </div> <div class="right div_any01"> <div class="div_any_child"> <div class="div_any_title"><img src="../images/title_3.png">数据采集条数(当日)</div> <p id="lineChart" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><img src="../images/title_4.png">就诊人数(当日)</div> <p id="lineChart2" class="p_chart"></p> </div> </div> </div>
部分CSS代码
::scrollbar-track{border-radius: 10px;box-shadow: inset 0 0 6px rgba(0,0,0,0);}/*滚动条的滑轨背景颜色*/ ::scrollbar-thumb{background-color: rgba(0,0,0,0.05);border-radius: 10px;box-shadow: inset 1px 1px 0 rgba(75, 75, 75, 0.58);}/*滑块颜色*/ ::scrollbar-thumb{background-color: rgba(0,0,0,0.2);border-radius: 10px;box-shadow: inset 1px 1px 0 rgba(48, 48, 48, 0.92);} ::scrollbar{width: 16px;height: 16px;}/* 滑块整体设置*/ ::scrollbar-track, ::scrollbar-thumb{border-radius: 999px;border: 5px solid transparent;} ::scrollbar-track{box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;} ::scrollbar-thumb{min-height: 20px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(255,255,255,.5) inset;} ::scrollbar-corner{background: transparent;}/* 横向滚动条和纵向滚动条相交处尖角的颜色 */ .yui-toast-mask { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); top: 0; left: 0; z-index: 1000; display: box; display: flex; display: flex; box-align: center; align-items: center; align-items: center; } .yui-toast-mask .yui-toast { background: rgba(0, 0, 0, 0.5); min-height: 3rem; min-width: 3rem; border-radius: .5rem; margin: 0 auto; overflow: hidden; color: #FFFFFF; font-size: 14px; padding: 10px; max-height: 90%; max-width: 90%; display: box; display: flex; display: flex; box-align: center; align-items: center; align-items: center; } *{ margin: 0; padding: 0; list-style: none; text-decoration: none; }
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
