【Echarts大屏】智慧医疗可视化大屏(新手必用)-阿里云开发者社区

【Echarts大屏】智慧医疗可视化大屏(新手必用)

2024-08-21 30

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Echarts大屏】智慧医疗可视化大屏(新手必用)

主题:智慧医疗可视化大屏

开发技术:

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代码


::-webkit-scrollbar-track{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);}/*滚动条的滑轨背景颜色*/
::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.05);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(75, 75, 75, 0.58);}/*滑块颜色*/
::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.2);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(48, 48, 48, 0.92);}
::-webkit-scrollbar{width: 16px;height: 16px;}/* 滑块整体设置*/
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb{border-radius: 999px;border: 5px solid transparent;}
::-webkit-scrollbar-track{box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;}
::-webkit-scrollbar-thumb{min-height: 20px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(255,255,255,.5) inset;}
::-webkit-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: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-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: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。

【Echarts大屏】智慧医疗可视化大屏(新手必用)

热门文章

最新文章

相关课程

相关电子书

相关实验场景