修改bug及能源分析样式

src/views/energy/analysis/trendAnalysis/components/barChart.vue

@@ -25,6 +25,10 @@ export default {
       default: () => {
         return []
       }
+    },
+    timeDim: {
+      type: String,
+      default: ''
     }
   },
   watch: {
@@ -51,13 +55,37 @@ export default {
       let xData = []
       let yData = []
       for (let i = 0; i < this.chartData.length; i++) {
-        xData.push(this.chartData[i].time)
+        let time = ""
+        if (this.timeDim === '3') {
+          let year = this.chartData[i].time.slice(0,4)
+          let weak = this.chartData[i].time.slice(4,6)
+          time = year+' 第 '+weak+' 周'
+        } else {
+          time = this.chartData[i].time
+        }
+        xData.push(time)
         yData.push(this.chartData[i].useNum)
       }
       var option = {
+        color:['#288AFF'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '4%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true
+        },
         xAxis: {
           type: 'category',
-          data: xData
+          data: xData,
+          axisLabel: {
+            rotate: "45"
+          }
         },
         yAxis: {
           type: 'value'
@@ -65,7 +93,12 @@ export default {
         series: [
           {
             data: yData,
-            type: 'bar'
+            type: 'bar',
+            barMaxWidth: 20,
+            label: {
+              show: true,
+              position: 'top'
+            }
           }
         ]
       };

src/views/energy/analysis/trendAnalysis/components/lineChart.vue

@@ -8,6 +8,7 @@
 <script>
 import * as echarts from 'echarts'
 import resize from '@/utils/chartMixins/resize'
+import moment from 'moment'
 export default {
   name: "LineChart",
   mixins: [resize],
@@ -25,6 +26,10 @@ export default {
       default: () => {
         return []
       }
+    },
+    timeDim: {
+      type: String,
+      default: ''
     }
   },
   watch: {
@@ -51,14 +56,35 @@ export default {
       let xData = []
       let yData = []
       for (let i = 0; i < this.chartData.length; i++) {
-        xData.push(this.chartData[i].time)
+        let time = ""
+        if (this.timeDim === '3') {
+          let year = this.chartData[i].time.slice(0,4)
+          let weak = this.chartData[i].time.slice(4,6)
+          time = year+' 第 '+weak+' 周'
+        } else {
+          time = this.chartData[i].time
+        }
+        xData.push(time)
         yData.push(this.chartData[i].useNum)
       }
 
       var option = {
+        color:['#288AFF'],
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '4%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true
+        },
         xAxis: {
           type: 'category',
-          data: xData
+          data: xData,
+          axisLabel: {
+            rotate: "45"
+          }
         },
         yAxis: {
           type: 'value'

src/views/energy/analysis/trendAnalysis/index.vue

@@ -1,15 +1,17 @@
 <template>
-  <div class="app-container" id="trendAnalysisBox">
+  <div class="app-container trendAnalysisBox" id="trendAnalysisBox">
     <!-- 搜索工作栏 -->
     <search-area :isFold="isFold" @submit="getList"/>
-    <el-tabs v-model="activeName" @tab-click="switchChart">
+    <el-tabs v-model="activeName" @tab-click="switchChart" v-show='chartData.length'>
       <el-tab-pane label="柱状图" name="bar">
-        <bar-chart ref="analysisBarChart" :chartData="chartData" />
+        <bar-chart ref="analysisBarChart" :chartData="chartData" :timeDim="timeDim"/>
       </el-tab-pane>
       <el-tab-pane label="折线图" name="line">
-        <line-chart ref="analysisLineChart" :chartData="chartData"/>
+        <line-chart ref="analysisLineChart" :chartData="chartData" :timeDim="timeDim"/>
       </el-tab-pane>
     </el-tabs>
+    <!-- 没有数据 -->
+    <div class="no-data-bg" v-show='!chartData.length'></div>
   </div>
 </template>
 <script>
@@ -25,7 +27,8 @@ export default {
     return {
       isFold: false,
       activeName: 'bar',
-      chartData: []
+      chartData: [],
+      timeDim: ''
     }
   },
   mounted() {
@@ -37,6 +40,7 @@ export default {
   },
   methods: {
     getList(params) {
+      this.timeDim = params.timeDim
       getEnergyTrend({ ...params }).then((res) => {
         if (res.code === 0) {
           this.chartData = res.data
@@ -58,4 +62,33 @@ export default {
     }
   }
 }
-</script>
+</script>
+<style lang='scss'>
+.trendAnalysisBox {
+  .el-tabs__nav::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #e4e7ed;
+    /* z-index: 1; */
+  }
+  .el-tabs__nav-wrap::after {
+    width: 0;
+  }
+  .el-tabs__item {
+    padding: 0 10px;
+  }
+  .el-tabs__item:hover {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item.is-active {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item {
+    color: rgba(0, 0, 0, 0.45);
+  }
+}
+</style>