多站点分析

src/views/spectrum/statisticalAnalysis/wqMultipleSites/sitesanalysisResult/widget.vue

@@ -3,16 +3,7 @@
     <div class="head-title">{{ title }}</div>
     <div>
       <span style="margin-left: 10px; color: #606266">时间轴：</span>
-      <el-slider
-        v-model="value1"
-        class="time-slider"
-        :show-tooltip="false"
-        :step="1"
-        :min="0"
-        :max="sliderMax"
-        :disabled="sliderMax == 0 || !checked"
-        @change="sliderChange"
-      ></el-slider>
+      <el-slider v-model="value1" class="time-slider" :show-tooltip="false" :step="1" :min="0" :max="sliderMax" :disabled="sliderMax == 0 || !checked" @change="sliderChange"></el-slider>
       <el-checkbox v-model="checked" style="margin-left: 20px">实时监测信息地图标注</el-checkbox>
       <div class="an-type">
         <span style="margin-left: 100px; color: #606266">统计方式：</span>
@@ -75,7 +66,6 @@ export default {
         let panelName = coms[coms.length - 1]
         return (panelName = 'sitesanalysisResult')
       })
-      console.log('panel.param', panel.param)
       return panel.param
     }
   },
@@ -118,14 +108,43 @@ export default {
 
         let _seriesdataLine = []
         let _seriesdataBar = []
-        _targetListVos.forEach((item) => {
+
+        // 按照前端设置的顺序对接口返回的数据进行排序
+        const sortArrayByOrderArray = (arr, orderArray) => {
+          return arr.sort((e1, e2) => {
+            return orderArray.indexOf(e1.siteId) - orderArray.indexOf(e2.siteId);
+          });
+        }
+        const targetList = sortArrayByOrderArray(_targetListVos, this.param.sites.map(item => item.id))
+        targetList.forEach((item) => {
           let _data = item.values.map((item2) => {
             return item2 || 0
           })
           let seriesdataLine = {
             name: item.siteName,
             type: 'line',
-            data: _data
+            data: _data,
+            markLine: {
+              data: [
+                {
+                  type: 'average',
+                  name: `${item.siteName}平均值`,
+                  label: {
+                    formatter: '{b}: {c}',
+                    position: 'insideEndTop', // 表现内容展示的位置
+                    // padding: [0, 0, 0, -120],
+                    // distance: [-120,-60],
+                    // formatter: '中文路均值',  // 标线展示的内容
+                    // color: '#8C8C8C'  // 展示内容颜色
+                    fontSize: 16
+                  },
+                  lineStyle: {
+                    // type: 'solid',
+                    width: 2
+                  },
+                }
+              ]
+            }
           }
           _seriesdataLine.push(seriesdataLine)
 
@@ -166,7 +185,6 @@ export default {
      * 加载图表
      */
     loadChart(chartData, domId) {
-      console.log('69--->>', chartData)
       let chartDom = this.$refs[domId]
       let myChart = echarts.init(chartDom)
       let colorAry = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
@@ -179,7 +197,7 @@ export default {
         dataZoom: [{ type: 'inside' }],
         grid: {
           top: 30,
-          bottom: 30,
+          bottom: 60,
           left: 35,
           right: 25,
           containLabel: true
@@ -278,7 +296,6 @@ export default {
         //   }
         // })
       })
-      console.log('站点：', sites)
     },
     /**
      * 滑块移动
@@ -345,9 +362,14 @@ export default {
 }
 .chart-box {
   height: 260px;
+  .head-title {
+    &:nth-child(n + 1) {
+      margin-top: 10px;
+    }
+  }
   .chart-item {
     width: 100%;
-    height: 100%;
+    height: 300px;
     float: left;
     > div.empty {
       width: 100%;