ems、箱型图

src/views/ems/dzjk/sbjk/PointChart.vue

@@ -1,20 +1,20 @@
 <!--电位展示图表-->
 <template>
   <el-dialog
-    :visible.sync="show"
+      :visible.sync="show"
-    :title="pointName"
+      :title="pointName"
-    :close-on-click-modal="false"
+      :close-on-click-modal="false"
-    show-close
+      show-close
-    destroy-on-close
+      destroy-on-close
-    lock-scroll
+      lock-scroll
-    append-to-body
+      append-to-body
-    width="1000px"
+      width="1000px"
-    class="ems-dialog"
+      class="ems-dialog"
-    :before-close="handleClosed"
+      :before-close="handleClosed"
   >
     <el-card
-      shadow="always"
+        shadow="always"
-      class="common-card-container common-card-container-body-no-padding time-range-card"
+        class="common-card-container common-card-container-body-no-padding time-range-card"
     >
       <div slot="header" class="time-range-header">
         <el-radio-group class="card-title" v-model="dataUnit">
@@ -23,10 +23,10 @@
           <el-radio :label="3">天</el-radio>
         </el-radio-group>
         <date-time-select
-          ref="dateTimeSelect"
+            ref="dateTimeSelect"
-          :data-unit="dataUnit"
+            :data-unit="dataUnit"
-          @initDate="(e) => (dataRange = e || [])"
+            @initDate="(e) => (dataRange = e || [])"
-          @updateDate="updateDate"
+            @updateDate="updateDate"
         />
       </div>
       <div style="height: 350px" id="searchChart"></div>
@@ -37,10 +37,11 @@
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
 import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
-import { getPointValueList } from "@/api/ems/search";
+import {getPointValueList} from "@/api/ems/search";
 import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
+
 export default {
-  components: { DateRangeSelect, DateTimeSelect },
+  components: {DateRangeSelect, DateTimeSelect},
   mixins: [resize],
   props: {
     siteId: {
@@ -93,7 +94,7 @@ export default {
     };
   },
   methods: {
-    showChart({ pointName, deviceCategory, deviceId, child = "" }) {
+    showChart({pointName, deviceCategory, deviceId, child = ""}) {
       //初始化数据
       this.pointName = pointName;
       this.deviceCategory = deviceCategory;
@@ -152,84 +153,94 @@ export default {
         endDate,
         siteDeviceMap,
       })
-        .then((response) => {
+          .then((response) => {
-          this.setOption(response?.data || []);
+            this.setOption(response?.data || []);
-        })
+          })
-        .finally(() => {
+          .finally(() => {
-          this.hideLoading();
+            this.hideLoading();
-        });
+          });
     },
     setOption(data) {
       if (!this.chart) return;
       this.chart.clear();
       console.log("返回的数据", data);
-      let dataset = [];
+      if (!data || data.length <= 0) {
-      if (data.length > 0) {
-        data.forEach((item, index) => {
-          item.deviceList.forEach((inner) => {
-            dataset.push({
-              name: `${
-                this.isDtdc
-                  ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
-                  : `${inner.deviceId}`
-              }`,
-              type: "line",
-              markPoint: {
-                symbolSize: 30,
-                emphasis: {
-                  disabled:false//打开 鼠标高亮
-                },
-                data: [//最大值、最小值
-                  {
-                    // type: 'max',
-                    name: `最大值`,
-                    coord:[inner.maxDate,inner.maxValue],
-                    relativeTo:'coordinate',
-                    label: {
-                      position: "top",
-                      formatter: item.dataType === 2 ? ([
-                        `最大值:${inner.maxValue}`,
-                        // `平均值:${inner.avgValue}`,
-                        `差值:${inner.diffValue}`,
-                      ]).join('\n') : ([
-                        `最大值:${inner.maxValue}`,
-                        // `平均值:${inner.avgValue}`,
-                      ]).join('\n'),
-                    },
-                  },
-                  {
-                    // type: 'min',
-                    name: `最小值`,
-                    coord:[inner.minDate,inner.minValue],
-                    relativeTo:'coordinate',
-                    label: {
-                      position: "top",
-                      formatter: item.dataType === 2 ? ([
-                        `最小值:${inner.minValue}`,
-                        // `平均值:${inner.avgValue}`,
-                        `差值:${inner.diffValue}`,
-                      ]).join('\n') : ([
-                        `最小值:${inner.minValue}`,
-                        // `平均值:${inner.avgValue}`,
-                      ]).join('\n'),
-                    }
-                  }
-                ]
-              },
-              xdata: [],
-              data: [],
-            });
-            const length = dataset.length;
-            inner.pointValueList.forEach((value) => {
-              dataset[length - 1].xdata.push(value.valueDate);
-              dataset[length - 1].data.push(value.pointValue);
-            });
-          });
-        });
-      } else {
         this.$message.warning("暂无数据");
       }
-      console.log("图表数据", dataset);
+      console.log('展示的图表类型chartType', data[0].chartType)
+
+      if (data[0].chartType === 2) {
+        //   箱型图
+        this.setBoxOption(data)
+      } else {
+        //折线图
+        this.setLineOption(data)
+      }
+    },
+    setLineOption(data) {
+      let dataset = [];
+      data.forEach((item, index) => {
+        item.deviceList.forEach((inner) => {
+          dataset.push({
+            name: `${
+                this.isDtdc
+                    ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
+                    : `${inner.deviceId}`
+            }`,
+            type: "line",
+            markPoint: {
+              symbolSize: 30,
+              emphasis: {
+                disabled: false//打开 鼠标高亮
+              },
+              data: [//最大值、最小值
+                {
+                  // type: 'max',
+                  name: `最大值`,
+                  coord: [inner.maxDate, inner.maxValue],
+                  relativeTo: 'coordinate',
+                  label: {
+                    position: "top",
+                    formatter: item.dataType === 2 ? ([
+                      `最大值:${inner.maxValue}`,
+                      // `平均值:${inner.avgValue}`,
+                      `差值:${inner.diffValue}`,
+                    ]).join('\n') : ([
+                      `最大值:${inner.maxValue}`,
+                      // `平均值:${inner.avgValue}`,
+                    ]).join('\n'),
+                  },
+                },
+                {
+                  // type: 'min',
+                  name: `最小值`,
+                  coord: [inner.minDate, inner.minValue],
+                  relativeTo: 'coordinate',
+                  label: {
+                    position: "top",
+                    formatter: item.dataType === 2 ? ([
+                      `最小值:${inner.minValue}`,
+                      // `平均值:${inner.avgValue}`,
+                      `差值:${inner.diffValue}`,
+                    ]).join('\n') : ([
+                      `最小值:${inner.minValue}`,
+                      // `平均值:${inner.avgValue}`,
+                    ]).join('\n'),
+                  }
+                }
+              ]
+            },
+            xdata: [],
+            data: [],
+          });
+          const length = dataset.length;
+          inner.pointValueList.forEach((value) => {
+            dataset[length - 1].xdata.push(value.valueDate);
+            dataset[length - 1].data.push(value.pointValue);
+          });
+        });
+      });
+      console.log("折线图图表数据", dataset);
       this.chart.setOption({
         legend: {
           // left: 'center',
@@ -241,14 +252,17 @@ export default {
         tooltip: {
           trigger: "axis",
           axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
+            type: 'cross',
-            type: "cross", // 默认为直线，可选为：'line' | 'shadow'
           },
+          // axisPointer: {
+          //   // 坐标轴指示器，坐标轴触发有效
+          //   type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          // },
         },
         textStyle: {
           color: "#333333",
         },
-        xAxis: { type: "category", data: dataset?.[0]?.xdata || [] },
+        xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
         yAxis: {
           type: "value",
         },
@@ -266,6 +280,122 @@ export default {
         series: dataset,
       });
     },
+    setBoxOption(data) {
+      let dataset = [];
+      data.forEach((item, index) => {
+        item.deviceList.forEach((inner) => {
+          dataset.push({
+            name: `${
+                this.isDtdc
+                    ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
+                    : `${inner.deviceId}`
+            }`,
+            type: "boxplot",
+            // markPoint: {
+            //   symbolSize: 30,
+            //   emphasis: {
+            //     disabled: false//打开 鼠标高亮
+            //   },
+            //   data: [//最大值、最小值
+            //     {
+            //       // type: 'max',
+            //       name: `最大值`,
+            //       coord: [inner.maxDate, inner.maxValue],
+            //       relativeTo: 'coordinate',
+            //       label: {
+            //         position: "top",
+            //         formatter: item.dataType === 2 ? ([
+            //           `最大值:${inner.maxValue}`,
+            //           // `平均值:${inner.avgValue}`,
+            //           `差值:${inner.diffValue}`,
+            //         ]).join('\n') : ([
+            //           `最大值:${inner.maxValue}`,
+            //           // `平均值:${inner.avgValue}`,
+            //         ]).join('\n'),
+            //       },
+            //     },
+            //     {
+            //       // type: 'min',
+            //       name: `最小值`,
+            //       coord: [inner.minDate, inner.minValue],
+            //       relativeTo: 'coordinate',
+            //       label: {
+            //         position: "top",
+            //         formatter: item.dataType === 2 ? ([
+            //           `最小值:${inner.minValue}`,
+            //           // `平均值:${inner.avgValue}`,
+            //           `差值:${inner.diffValue}`,
+            //         ]).join('\n') : ([
+            //           `最小值:${inner.minValue}`,
+            //           // `平均值:${inner.avgValue}`,
+            //         ]).join('\n'),
+            //       }
+            //     }
+            //   ]
+            // },
+            xdata: [],
+            data: [],
+          });
+          const length = dataset.length;
+          inner.pointValueList.forEach((value) => {
+            const {valueDate, min, q1, median, q3, max} = value
+            // const mid = (max - min) / 2, minLine = min + Math.abs(median / 2),
+            //     maxLine = max - Math.abs(median / 2)
+            dataset[length - 1].xdata.push(valueDate);
+            dataset[length - 1].data.push([min, q1, median, q3, max]);
+          });
+        });
+      });
+      console.log("箱型图图表数据", dataset);
+      this.chart.setOption({
+        legend: {
+          // left: 'center',
+          // top: '10',
+        },
+        grid: {
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: function (params) {
+            let data = params.data;
+            let result = params.marker + params.name + ' ' + params.seriesName + '<br/>';
+            result += '最小值: ' + data[1] + '<br/>';
+            result += '平均值: ' + data[3] + '<br/>';
+            result += '最大值: ' + data[5];
+            return result;
+          }
+          // trigger: "axis",
+          // axisPointer: {
+          //   type: 'cross',
+          // },
+          // axisPointer: {
+          //   // 坐标轴指示器，坐标轴触发有效
+          //   type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          // },
+        },
+        textStyle: {
+          color: "#333333",
+        },
+        xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
+        yAxis: {
+          type: "value",
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            start: 0,
+            end: 100,
+          },
+          {
+            start: 0,
+            end: 100,
+          },
+        ],
+        series: dataset,
+      });
+    },
+
     updateDate(val) {
       this.dataRange = val || [];
       this.getDate();

src/views/ems/dzjk/sbjk/ems/index.vue

@@ -236,8 +236,6 @@
                 v-html="tempDataItem.unit"></span></span>
             </span>
         </el-col>
-      </el-row>
-      <el-row class="device-info-row" style="margin-top:20px;">
         <el-col v-for="(tempDataItem,tempDataIndex) in pcsDataList" :key="tempDataIndex+'pcsTempData'"
                 :span="6" class="device-info-col">
             <span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">

src/views/ems/search/index.vue

@@ -227,7 +227,6 @@ export default {
         //折线图
         this.setLineOption(data)
       }
-
     },
     setLineOption(data) {
       let dataset = [];
@@ -408,9 +407,8 @@ export default {
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            console.log(11111111111, params.data)
             let data = params.data;
-            let result = params.name + ' ' + params.seriesName + '<br/>';
+            let result = params.marker + params.name + ' ' + params.seriesName + '<br/>';
             result += '最小值: ' + data[1] + '<br/>';
             result += '平均值: ' + data[3] + '<br/>';
             result += '最大值: ' + data[5];