zc

src/views/resourceDevice/pageComponent/equipmentLifeComponent.vue

@@ -2,167 +2,250 @@
   <div class="equipmentLifeComponent">
     <title-page-img-components :propsData="propsData"></title-page-img-components>
     <div class="eCharts-max-big-box">
-      <div id="equipmentLifeComponentECharts">
-
-      </div>
-      <div class="position-equipmentLife-box">
-        <div v-for="(item,index) in dataList" :key="index">
-          <p>{{item.name}}</p>
-          <p>{{item.value}}台</p>
-          <p>{{item.num}}%</p>
-        </div>
-      </div>
+      <div id="equipmentLifeComponentECharts"></div>
+      <!--<div class="position-equipmentLife-box">-->
+      <!--<div v-for="(item,index) in dataList" :key="index">-->
+      <!--<p>{{item.name}}</p>-->
+      <!--<p>{{item.value}}台</p>-->
+      <!--<p>{{item.num}}%</p>-->
+      <!--</div>-->
+      <!--</div>-->
     </div>
   </div>
 </template>
 <script>
   import {
-    reportReportBsEquipLifeList,
-  } from "@/api/index";
+    reportReportBsEquipLifeList
+  } from '@/api/index'
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
+
   export default {
     name: 'equipmentLifeComponent',
     components: {
       titlePageImgComponents
     },
-    data () {
+    data() {
       return {
-        propsData:{
-          title:'设备使用寿命统计',
-          checkType:'equipmentLifeComponent',
+        propsData: {
+          title: '设备使用寿命统计',
+          checkType: 'equipmentLifeComponent'
         },
         //eCharts定时器
-        eChartsTimer:null,
-        dataList:[],
+        eChartsTimer: null,
+        dataList: []
       }
     },
-    created(){
+    created() {
 
     },
     mounted() {
-      this.timedRefresh();
+      this.timedRefresh()
     },
     methods: {
-      timedRefresh(){
-        let self = this;
-        self.getData();
+      timedRefresh() {
+        let self = this
+        self.getData()
         //定时动画
-        window.clearInterval(self.eChartsTimer);
-        self.eChartsTimer = setInterval(function(){
-          self.getData();
-        },1000*30);
+        window.clearInterval(self.eChartsTimer)
+        self.eChartsTimer = setInterval(function() {
+          self.getData()
+        }, 1000 * 30)
       },
-      getData(){
+      getData() {
         reportReportBsEquipLifeList().then(response => {
-          let list = [];
-          for(let i=0;i<response.data.length;i++){
+          let list = []
+          for (let i = 0; i < response.data.length; i++) {
             list.push({
-              name:response.data[i].lifeInterval?response.data[i].lifeInterval:'未知',
-              value:response.data[i].deviceNum?response.data[i].deviceNum:0,
-              num:response.data[i].deviceRate?response.data[i].deviceRate:0,
+              name: response.data[i].lifeInterval ? response.data[i].lifeInterval : '未知',
+              value: response.data[i].deviceNum ? response.data[i].deviceNum : 0,
+              num: response.data[i].deviceRate ? response.data[i].deviceRate : 0
             })
           }
-          this.$set(this,'dataList',list);
-          this.eChartsMethod(list);
+          this.$set(this, 'dataList', list)
+          this.eChartsMethod(list)
         })
       },
       eChartsMethod(list) {
         let option = {
-          color:['#0183FA','#00E6FF','#047581','#FCC23C','#FF7575'],
+          grid: {
+            left: 50,
+            right: 50,
+            bottom: 20,
+            top: 50,
+            containLabel: true
+          },
+          toolbox: {},
+          tooltip: {
+            show:false,
+            trigger: 'item',
+            axisPointer: {
+              type: 'none'
+            },
+            formatter: function(params) {
+              return params.data.num + '%'
+            },
+            textStyle: {
+              fontSize: 16,
+              fontWeight: 700,
+            },
+          },
+          legend: {
+            show: false
+          },
+          xAxis: {
+            show: true,
+            type: 'category',
+            data: list.map((item) => {
+              return item.name
+            }),
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(255, 255, 255, 0.2)',
+                type: 'solid'
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              color: '#FFF',
+              fontSize: 18,
+            },
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                show: true,
+                margin: 1,//右侧y轴数字的外边距
+                textStyle: {
+                  fontSize: 16,
+                  fontWeight: 700,
+                  color: 'rgba(255,255,255,1)'
+                },
+                formatter: (value) => {
+                  return value
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: 'rgba(233, 249, 248, 0.2)',
+                  type: 'dashed'
+                }
+              },
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: 'rgba(233, 249, 248, 0.2)'
+                }
+              }
+
+            }
+          ],
           series: [
             {
-              name:'漏斗图',
-              type:'funnel',
-              left: 33,
-              right:33,
-              top: 31,
-              bottom: 31,
-              sort: 'descending',//'ascending'，'descending'，'none'
+              name: '1',
+              type: 'bar',
+              zlevel: 1,
+              showBackground: true,
               label: {
-                show:false,
-                position: 'inside',
-                fontSize:18,
-                color: "#fff",
-                itemStyle: {
-                  color: '#fff',
-                  borderWidth: 0
+                show: true,
+                position: 'top',
+                formatter: function (params) {
+                  return params.data.value + '台 '+params.data.num+'%'
+                },
+                textStyle: {
+                  fontSize: 16,
+                  fontWeight: 700,
+                  color: 'rgba(255,255,255,1)'
                 },
-                formatter:function(params){//自动提示工具
-                  return params.name
-                }
               },
               itemStyle: {
-                borderColor: '#fff',
-                borderWidth: 0
-              },
-              emphasis: {
-                label: {
-                  fontSize: 20//悬停时文字大小
+                normal: {
+                  color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: 'rgba(71, 226, 255, 1)'
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(2, 132, 226, 0.8)'
+                    }
+                  ]),
                 }
               },
+              barWidth: 24,
               data: list
             }
           ]
-        };
-        let echartsBox = this.$echarts.init(document.getElementById('equipmentLifeComponentECharts'));
-        echartsBox.clear();
-        echartsBox.setOption(option);
+        }
+        let echartsBox = this.$echarts.init(document.getElementById('equipmentLifeComponentECharts'))
+        echartsBox.clear()
+        echartsBox.setOption(option)
       }
     },
     beforeDestroy() {
       //清除定时器
-      window.clearInterval(this.eChartsTimer);
+      window.clearInterval(this.eChartsTimer)
     },
     destroyed() {
       //清除定时器
-      window.clearInterval(this.eChartsTimer);
+      window.clearInterval(this.eChartsTimer)
     }
   }
 </script>
 <style scoped lang="scss">
-  .equipmentLifeComponent{
+  .equipmentLifeComponent {
     height: 443px;
-    width:680px;
+    width: 680px;
     .eCharts-max-big-box {
-      height:381px;
+      height: 381px;
       background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
       overflow: hidden;
       position: relative;
-      #equipmentLifeComponentECharts{
-        z-index:5;
-        height:361px;
-        width:340px;
+      #equipmentLifeComponentECharts {
+        z-index: 5;
+        height: 381px;
+        width: 680px;
         position: absolute;
-        top:0;
-        left:0;
+        top: 0;
+        left: 0;
       }
-      .position-equipmentLife-box{
-        z-index:0;
-        height:361px;
-        width:316px;
+      .position-equipmentLife-box {
+        z-index: 0;
+        height: 361px;
+        width: 316px;
         position: absolute;
-        top:26px;
-        left:170px;
-        div{
-          width:464px;
+        top: 26px;
+        left: 170px;
+        div {
+          width: 464px;
           display: flex;
-          padding-left:202px;
-          border-bottom: 1px dashed rgba(4,117,129,0.3);
-          p{
-            padding-top:14px;
-            line-height:46px;
-            font-size:18px;
-            color:#ffffff;
+          padding-left: 202px;
+          border-bottom: 1px dashed rgba(4, 117, 129, 0.3);
+          p {
+            padding-top: 14px;
+            line-height: 46px;
+            font-size: 18px;
+            color: #ffffff;
           }
-          p:nth-child(1){
-            width:100px;
+          p:nth-child(1) {
+            width: 100px;
           }
-          p:nth-child(2){
-            width:100px;
+          p:nth-child(2) {
+            width: 100px;
 
           }
-          p:nth-child(3){
-            width:60px;
+          p:nth-child(3) {
+            width: 60px;
           }
         }
       }