【Echarts大屏】数字化巡检可视化大屏(附原码一键复制)

主题:通用平台模板

开发技术:Echarts+html+css+js

支持:dw,vscode,webstorm,idea,Hbuilderx等



整体效果

图片

部分js代码

<div class="leftBox col-md-2">
          <div class="pingfen">
            <div>
              <div class="pfTitle">
                <img src="img/aqpf.png" alt="" />
                <span class="titleText">安全评分</span>
              </div>
              <div class="pfcontent">
                <div class="leftBox">
                  <img src="img/aqdj.png" alt="" />
                  <span>安全等级</span>
                </div>
                <div id="echartAqpf" style="width:105px;height:105px;padding-left: 20px;margin-bottom: 32px;"></div>
              </div>
            </div>
          </div>
          <div class="paimin">
            <div>
              <div class="pfTitle" style="margin-bottom: 30px;">
                <img style="margin-right: 10px;" src="img/jzaqpf.png" alt="" />
                <span class="titleText">建筑安全评分排名</span>
              </div>
              <div id="FontScroll">
                <ul>
                  <li>
                    <a href="#">
                      <span class="leftSpan">甘肃省兰州市博物馆 </span>
                      <span>70</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span class="leftSpan">西北大厦 </span>
                      <span>75</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span class="leftSpan">世纪广场 </span>
                      <span>71</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span class="leftSpan">中匈友好国际大厦 </span>
                      <span>65</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span class="leftSpan">IBC中海国际大厦 </span>
                      <span>60</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="top10">
            <div>
              <div class="pfTitle" style="margin-bottom: 30px;">
                <img style="margin-right: 10px;" src="img/aqyh.png" alt="" />
                <span class="titleText">安全隐患TOP10</span>
              </div>
              <img
                style="display: block;margin: auto;width: 80%;height: 75%;"
                src="img/aqyhtop100.png"
                alt=""
              />
            </div>
          </div>
        </div>
部分css代码

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: rgba(14, 18, 45, 1);
}
.titleText {
  font-size: 20px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(27, 146, 253, 1);
}
.main {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  min-width: 1560px;
}
.main .header {
  position: relative;
  width: 100%;
  height: 140px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.main .header .dateBox {
  width: 363px;
  position: absolute;
  right: 10px;
}
.main .header .dateBox span {
  font-size: 18px;
  font-family: HiraginoSansGB-W3;
  font-weight: normal;
  color: rgba(255, 255, 255, 1);
}
.main .content {
  width: 100%;
  padding: 0 10px 15px 10px;
  display: flex;
}
.main .content .leftBox .pingfen {
  width: 100%;
  height: 232px;
  background: rgba(50, 72, 106, 0.2);
}
.main .content .leftBox .pingfen .pfcontent {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.main .content .leftBox .pingfen .pfcontent .leftBox {
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


想要源码的小伙伴们，请关注公众号，点击获取资源

创作不易，如果你觉得这篇文章对你有帮助，可以花0.1秒的时间点个【赞】和【在看】，你的支持永远是我前进的动力~




更多精彩大屏，欢迎留言




Echarts技术专家

个人观点，仅供参考
阅读 929

​

写留言