资讯详情

vue+Echars移动端可视化页面

页面展示：

在这里插入图片描述

目录

    • 一、引入echars
    • 二、引入成功，可根据下面的代码实现
    • 三、实现代码：
      • JianKong.vue代码如下
      • compare=>index.vue代码如下
      • connect=》index.vue代码如下：
      • server=>index.vue代码如下：

一、引入echars

1.终端下载echarts

npm install echarts --save

2.在main.js中引入

import echarts from "echarts" Vue.prototype.$echarts = echarts;

二、引入成功，可根据下面的代码实现

目录结构，在view下图所示新建目录：

三、实现代码：

JianKong.vue代码如下

<template>   <div class="wrapper">       <span style="color:#fff;float:left;" @click="$router.back(-1)"><i           class="iconfont icon-jiantou"           style="margin-top: 10px;margin-left:10px;"         ></i></span>     <header>                <div class="header_title">骨骼监控</div>     </header>     <main class="main" style="width: 100%">       <!-- 故障监控 -->       <div class="main_left">         <div class="left-top-img-box box-img">           <img src="@/assets/images/角标1@2x.png" />         </div>         <div class="left-bottom-img-box box-img">
          <img src="@/assets/images/三角3@2x.png" />
        </div>
        <div class="right-top-img-box box-img">
          <img src="@/assets/images/三角2@2x.png" />
        </div>
        <div class="right-bottom-img-box box-img">
          <img src="@/assets/images/角标2@2x.png" />
        </div>
        <div class="main_right_top_content">
          <h2 class="timeselect">
            <div class="content-title-box" style="padding-left: 0px">
              故障监测统计
            </div>
          </h2>
          <div class="ld-all">
            <div class="ld-left">
              <div class="left-one">
                <div class="item">
                  <span>总检查数</span>
                  <div class="imgBox">
                    <div class="num numBG1">1</div>
                    <div class="num numBG1">0</div>
                    <div class="num numBG1">9</div>
                    <div class="num numBG1">4</div>
                  </div>
                </div>
                <div class="item">
                  <span>总故障数</span>
                  <div class="imgBox">
                    <div class="num numBG2">0</div>
                    <div class="num numBG2">0</div>
                    <div class="num numBG2">5</div>
                    <div class="num numBG2">3</div>
                  </div>
                </div>
                <div class="item">
                  <span>总成功数</span>
                  <div class="imgBox">
                    <div class="num numBG3">1</div>
                    <div class="num numBG3">0</div>
                    <div class="num numBG3">4</div>
                    <div class="num numBG3">1</div>
                  </div>
                </div>
              </div>
              <div class="left-two">
                <compare
                  :daobao="daobao"
                  :around="around"
                  v-if="daobao !== null"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 骨骼状态使用率 -->
      <div class="main_center">
        <div class="left-top-img-box box-img">
          <img src="@/assets/images/角标1@2x.png" />
        </div>
        <div class="left-bottom-img-box box-img">
          <img src="@/assets/images/三角3@2x.png" />
        </div>
        <div class="right-top-img-box box-img">
          <img src="@/assets/images/三角2@2x.png" />
        </div>
        <div class="right-bottom-img-box box-img">
          <img src="@/assets/images/角标2@2x.png" />
        </div>
        <div class="center-one">
            <h2 class="timeselect">
            <div class="content-title-box" style="padding-left: 0px">
              骨骼状态使用率
            </div>
          </h2>
          <server :arr="arr" :yData="yData"></server>
        </div>
      </div>
      <!-- 动力监控 -->
      <div class="main_bottom">
           <div class="left-top-img-box box-img">
          <img src="@/assets/images/角标1@2x.png" />
        </div>
        <div class="left-bottom-img-box box-img">
          <img src="@/assets/images/三角3@2x.png" />
        </div>
        <div class="right-top-img-box box-img">
          <img src="@/assets/images/三角2@2x.png" />
        </div>
        <div class="right-bottom-img-box box-img">
          <img src="@/assets/images/角标2@2x.png" />
        </div>
        <div class="bottom-one">
             <h2 class="timeselect">
            <div class="content-title-box" style="padding-left: 0px">
              动力监控
            </div>
            </h2>
             <div class="sjk">
              <div class="sjk-first">
                <div class="sjk-speed">
                  <div class="connect_number"><connect /></div>
                  <div class="speed">
                    <div
                      class="server_content_right—top speed"
                      style="width: 100%;display: flex;flex-direction: column;">
                      <div class="speed_item">
                        <div class="speed_msg">
                          <div class="item">
                            <span>上肢外骨骼</span>
                            <div class="imgBox">
                              <div class="num">2</div>
                              <div class="num">6</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="speed_item">
                        <div class="speed_msg"><div class="item">
                            <span>下肢外骨骼</span>
                            <div class="imgBox">
                              <div class="num">1</div>
                              <div class="num">1</div>
                              <div class="num">2</div>
                            </div>
                          </div></div>
                      </div>
                    </div>
                  </div>
                  <div class="speed">
                    <div
                      class="server_content_right—top speed"
                      style="width: 100%;display: flex;flex-direction: column;">
                      <div class="speed_item">
                        <div class="speed_msg">
                          <div class="item">
                            <span>腰部外骨骼</span>
                            <div class="imgBox">
                              <div class="num">3</div>
                              <div class="num">0</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="speed_item">
                        <div class="speed_msg"><div class="item">
                            <span>软体外骨骼</span>
                            <div class="imgBox">
                              <div class="num">3</div>
                              <div class="num">2</div>
                            </div>
                          </div></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

        </div>
      </div>
    </main>
  </div>
</template>

<script>
import compare from "./compare/index.vue";
import server from "./server/index.vue";
import connect from "./Connect/index.vue";
export default { 
        
  components: { 
        
    compare,
    server,
    connect,
  },
  data() { 
        
    return { 
        
      daobao: 93,
      around: "23",
      arr: [10,55,44,90,74,63,82], //cpu纵轴数据
      yData: ['8:00','9:00','10:00','11:00','12:00','13:00','14:00'], //cpu横轴数据
    };
  },
  created() { 
        
    let date = new Date();
    console.log("时间" + date);
  },
};
</script>

<style lang="scss" scoped>
.wrapper { 
        
  width: 100%;
  height: 100%;
  background: url("../../assets/images/bg.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
}
header { 
        
  width: 100%;
  height: 46px;
  background: url("../../assets/images/titleheader.png") no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;  
  justify-content: center;

  .header_title { 
        
    height: 64px;
    font-size: 16px;
    margin-top: -15px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #ffffff;
    line-height: 64px;
    letter-spacing: 1px;
    background: linear-gradient(360deg, #46b1ff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.main { 
        
  flex: 1;
  width: 100%;
  height: 100%;
  width: calc(100vw - 64px);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(
    270deg,
    rgba(26, 199, 255, 0) 0%,
    rgba(26, 199, 255, 0.06) 51%,
    rgba(26, 199, 255, 0) 100%
  );
}
.main_left { 
        
  position: relative;
  width: 100%;
  height: 320px;
}
.main_center { 
        
  position: relative;
  width: 100%;
  height: 220px;
}
.main_bottom{ 
        
    position: relative;
  width: 100%;
  height: 220px;
}
.center-one{ 
        
    height: 90%;
    width: 100%;
    margin: 0 auto;
}
.bottom-one{ 
        
    height: 100%;
    width: 100%;
    margin: 0 auto;
}
.sjk-speed { 
        
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  .connect_number { 
        
    display: block;
    width: 45%;
    height: 100%;
  }
  .speed { 
        
    width: 30%;
    height: 100%;
  }
}
.server_content_right—top { 
        
  width: 100%;
  height: 100%;
  // margin-top: -24px;
  // padding-top: 24px;
}
.speed_item { 
        
  flex: 1;
  background: url("../../assets/images/msg_con.png") no-repeat;
  background-size: 84%;
  background-position: center 20%;

  .speed_title { 
        
    text-align: center;
    margin: 10px auto 0;
    color: rgb(70, 197, 165);
    font-size: 12px;
  }

  .speed_msg { 
        
    color: wheat;
    margin: 0 auto;
    margin-top: 17px;
    text-align: center;
    font-size: 14px;
    position: relative;
      display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    .item { 
        
          display: flex;
          flex-direction: column;
          align 

        标签： 6j20高温电阻合金丝材
 
锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台