主题:数字化人社大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>全息档案</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- Bootstrap 3.3.6 --> <link rel="stylesheet" href="../content/ui/global/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../js/public/liMarquee.css"> <link rel="stylesheet" href="../css/test.css"> <!-- Font Awesome --> <link href="../content/ui/global/font-awesome/css/font-awesome.css" rel="stylesheet" /> <!-- Theme style --> <link rel="stylesheet" href="../content/adminlte/dist/css/AdminLTE.css"> <link rel="stylesheet" href="../content/adminlte/dist/css/skins/_all-skins.min.css"> <link href="../content/min/css/supershopui.common.min.css" rel="stylesheet"/> <link rel="stylesheet" href="../content/plugins/iCheck/flat/blue.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
部分css代码
@charset "UTF-8"; /*滚动条美化**/ ::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(0,0,0,.1);} ::scrollbar-thumb{background-color: rgba(0,0,0,0.2);border-radius: 10px;box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);} ::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(0,0,0,.2) inset;} ::scrollbar-corner{background: transparent;} html { overflow-x: hidden; } /** Tab */ .content-tabs{border-bottom:solid 2px #e7ebee;background:#fff !important;border-top:none;height:41px;} .content-tabs .page-tabs a.active{background:whitesmoke;color:#fff !important;border-right: solid 1px #e7ebee;} .content-tabs .roll-left{border-right: solid 1px #e7ebee;} .content-tabs .roll-right{border-left: solid 1px #e7ebee;} #content-wrapper{background-color:#f9f9f9;border-left:2px solid #e7ebee;} *{box-sizing:border-box;box-sizing:border-box;box-sizing:border-box;} *:before,*:after{box-sizing:border-box;box-sizing:border-box;box-sizing:border-box;} button::focus-inner,input::focus-inner{padding:0;border:0;}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
