From 076d8685573236fd044bdbcd167b60652e8799cd Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Tue, 19 Sep 2023 17:20:09 +0800
Subject: [PATCH] Merge branch 'feature_1.0'

---
 src/components/Echarts/LineChart2.vue   |   48 ++++++
 src/components/Echarts/LineChartSpe.vue |  187 +++++++++++---------------
 src/views/contrast/index.vue            |   75 ++++------
 src/views/averageContrast/index.vue     |   60 +++-----
 4 files changed, 175 insertions(+), 195 deletions(-)

diff --git a/src/components/Echarts/LineChart2.vue b/src/components/Echarts/LineChart2.vue
index 5423c18..d32faf0 100644
--- a/src/components/Echarts/LineChart2.vue
+++ b/src/components/Echarts/LineChart2.vue
@@ -27,6 +27,10 @@
       type: Boolean,
       default: true,
     },
+    isMouse: {
+      type: Boolean,
+      default: false,
+    },
     chartData: {
       type: Object,
       required: true,
@@ -89,6 +93,42 @@
         return res * fontSize
       }
       let that = this
+      if (this.isMouse) {
+        this.chart.on('mouseover', function (params) {
+          that.chart.setOption({
+            series: [
+              {
+                name: params.seriesName,
+                label: {
+                  show: true,
+                  fontSize: 16,
+                  position: [10, -15],
+                  formatter: '{c}'
+                }
+              }
+            ]
+          })
+        })
+        // ���������������mouseout������������������������
+        this.chart.on('mouseout', function (params) {
+          that.chart.setOption({
+            series: [
+              {
+                name: params.seriesName,
+                lineStyle: {
+                  width: 2
+                },
+                label: {
+                  show: false
+                },
+                endLabel: {
+                  show: false
+                }
+              }
+            ]
+          })
+        })
+      }
       this.chart.setOption(
         {
           title: {
@@ -188,8 +228,14 @@
 
           yAxis: {
             axisTick: {
-              show: false, // ������������
+              show: true, // ������������
             },
+            axisLine: {
+              show: true, //���������������������
+            },
+            axisLabel: {
+              show: true, //������������������������������
+            }
             // axisLine: {
             //   lineStyle: {
             //     color: '#000000'
diff --git a/src/components/Echarts/LineChartSpe.vue b/src/components/Echarts/LineChartSpe.vue
index 0adc342..3f35afa 100644
--- a/src/components/Echarts/LineChartSpe.vue
+++ b/src/components/Echarts/LineChartSpe.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize'
 
@@ -48,7 +48,7 @@
       handler(val) {
         this.setOptions(val)
       },
-      deep: true,
+      deep: true
     },
   },
   mounted() {
@@ -66,9 +66,11 @@
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons')
+      this.chart.clear()
       this.setOptions(this.chartData)
     },
     setOptions(val) {
+      let that = this
       function fontSize(res) {
         let clientWidth =
           window.innerWidth ||
@@ -78,107 +80,95 @@
         let fontSize = 100 * (clientWidth / 1920)
         return res * fontSize
       }
+      /**
+   * ���������������mouseover������������������������������
+   * ������������������ ������������������������������������������������������������
+   * ���������������������������������������������������������������������������
+   * ������������������������series���������������������������������
+   * ������params������������������������������
+   */
+      this.chart.on('mouseover', function (params) {
+        that.chart.setOption({
+          series: [
+            {
+              name: params.seriesName,
+              label: {
+                show: true,
+                fontSize: 16,
+                position: [10, -15],
+                formatter: '{c}'
+              }
+            }
+          ]
+        })
+      })
+      // ���������������mouseout������������������������
+      this.chart.on('mouseout', function (params) {
+        that.chart.setOption({
+          series: [
+            {
+              name: params.seriesName,
+              lineStyle: {
+                width: 2
+              },
+              label: {
+                show: false
+              },
+              endLabel: {
+                show: false
+              }
+            }
+          ]
+        })
+      })
       this.chart.setOption(
         {
           xAxis: {
             data: val.xAxis,
-            boundaryGap: true,
+            boundaryGap: false,
             axisTick: {
               show: true,
             },
-            
+
           },
           grid: {
-            left: 100,
-            right: 10,
-            bottom: 20,
-            top: 30,
-            height: fontSize(4),
-            width: fontSize(15),
+            left: '5%',
+            right: '5%',
+            top: '5%',
             containLabel: true,
+            height: fontSize(4.3),
           },
-          // toolbox: {
-          //   feature: {
-          //     dataZoom: {
-          //       yAxisIndex: 'none',
-          //     },
-          //     restore: {},
-          //     saveAsImage: {},
-          //   },
-          // },
-          // tooltip: {
-          //   trigger: 'axis',
-          //   position: function(pt) {
-          //     return [pt[0], '10%']
-          //   }
-          // },
           tooltip: {
             trigger: 'axis',
-            position: function (pt) {
-              return [pt[0], '10%']
-            },
-            // formatter(params) {
-            //   console.log(params,'ssss');
-            //   let data=[]
-            //   for (let i = 0; i < params.length; i++) {
-            //     data+=params[i].seriesName + '&nbsp:' +'&nbsp&nbsp'+params[i].value+ '<br/>'
-            //   }
-            // return data
-            // },
+            backgroundColor: 'rgba(50,50,50,0.5)',
+            textStyle: {
+              color: 'rgb(255, 255, 255);',
+              fontSize: fontSize(0.117), // ������������
+              lineHeight: 0
+            }
           },
-
-          yAxis: [
-            {
-              type: 'value',
-              position: 'left',
-              axisLabel: {
-                show: true,
-              },
+          yAxis: {
+            axisTick: {
+              show: true, // ������������
             },
-            {
-              type: 'value',
-              position: 'right',
-              axisLabel: {
-                show: true,
-              },
+            axisLine: {
+              show: true, //���������������������
             },
-            {
-              type: 'value',
-              position: 'right',
-              offset: 50,
-              axisLabel: {
-                show: true,
-              },
-              min: 'dataMin', //���������������������������
-              max: 'dataMax', //���������������������������
-              min: function (value) {
-                //���������������������������������������
-                return Math.floor(value.min)
-              },
-              max: function (value) {
-                //���������������������������������������
-                return Math.ceil(value.max)
-              },
-
-              scale: true, //���������
-              minInterval: 0.1, //������������
-            },
-            {
-              type: 'value',
-              position: 'left',
-              axisLabel: {
-                show: true,
-              },
-              offset: 50,
-            },
-          ],
+            axisLabel: {
+              show: true, //������������������������������
+            }
+          },
           legend: {
-            icon: 'circle',
-            itemHeight: 15,
-            // textStyle: {
-            //   fontSize: 18
-            // },
             data: val.title,
+            tooltip: {
+              show: true,
+            },
+            textStyle: {
+              fontSize: fontSize(0.15),
+            },
+            widht: 'auto',
+            height: 'auto',
+            top: fontSize(5.5),
           },
           dataZoom: [
             {
@@ -193,34 +183,11 @@
               height: fontSize(0.4),
             },
           ],
-          series: val.series,
-          // [{
-          //   name: JSON.parse(JSON.stringify(val.title)),
-          //   itemStyle: {
-          //     normal: {
-          //       color: '#7AC5CD',
-          //       lineStyle: {
-          //         color: '#7AC5CD',
-          //         width: 2
-          //       }
-          //     }
-          //   },
-          //   smooth: true,
-          //   type: 'line',
-          //   data: val.series,
-          //   animationDuration: 2800,
-          //   animationEasing: 'cubicInOut',
-          //   areaStyle: {},
-          //   label: {
-          //     normal: {
-          //       show: true,
-          //       position: 'top'
-          //     }
-          //   }
-          // }]
+          series: val.series
         },
         true
       )
+      window.onresize = this.chart.resize
     },
   },
 }
diff --git a/src/views/averageContrast/index.vue b/src/views/averageContrast/index.vue
index 508984d..ae7f421 100644
--- a/src/views/averageContrast/index.vue
+++ b/src/views/averageContrast/index.vue
@@ -1,39 +1,16 @@
 <template>
   <div style="width: 100%">
     <div class="topSelect">
-      <el-cascader
-        v-model="newMac"
-        :options="options"
-        clearable
-        placeholder="������������"
-        style="width: 354px"
-      />
-      <el-select
-        v-model="value"
-        placeholder="������������"
-        style="margin-left: 20px"
-      >
-        <el-option
-          v-for="item in newSensor"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
+      <el-cascader v-model="newMac" :options="options" clearable placeholder="������������" style="width: 354px" />
+      <el-select v-model="value" placeholder="������������" style="margin-left: 20px">
+        <el-option v-for="item in newSensor" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
       <!-- <el-radio-group v-model="radio1" style="margin-left:20px">
         <el-radio-button label="������" />
         <el-radio-button label="������" />
       </el-radio-group> -->
-      <el-date-picker
-        v-model="timevalue"
-        type="datetimerange"
-        range-separator="���"
-        value-format="yyyy-MM-dd HH"
-        start-placeholder="������������"
-        :picker-options="pickerOptions"
-        end-placeholder="������������"
-        style="margin-left: 1rem"
-      >
+      <el-date-picker v-model="timevalue" type="datetimerange" range-separator="���" value-format="yyyy-MM-dd HH"
+        start-placeholder="������������" :picker-options="pickerOptions" end-placeholder="������������" style="margin-left: 1rem">
       </el-date-picker>
       <!--������������-->
       <el-button @click="selectData" class="btn1">������</el-button>
@@ -46,7 +23,7 @@
       <div style="position:absolute">(������:ug/m��)</div>
       <div style="text-align: center;width: 100%;">{{ newData }}��{{ newMac?newMac[0]:'' }}��{{ newMac?newMac[newMac.length - 1][0]:'' }}��{{ value |sensorFilter }}�����������</div>
     </div> -->
-    <LineChart :chart-data="lineChartData" style="height: 30rem" />
+    <LineChart :chart-data="lineChartData" :isMouse="true" style="height: 30rem" />
   </div>
 </template>
 
@@ -199,14 +176,14 @@
     this.getData()
   },
   // ������������ - ��������������������������� DOM ���������
-  mounted() {},
-  beforeCreate() {}, // ������������ - ������������
-  beforeMount() {}, // ������������ - ������������
-  beforeUpdate() {}, // ������������ - ������������
-  updated() {}, // ������������ - ������������
-  beforeDestroy() {}, // ������������ - ������������
-  destroyed() {}, // ������������ - ������������
-  activated() {},
+  mounted() { },
+  beforeCreate() { }, // ������������ - ������������
+  beforeMount() { }, // ������������ - ������������
+  beforeUpdate() { }, // ������������ - ������������
+  updated() { }, // ������������ - ������������
+  beforeDestroy() { }, // ������������ - ������������
+  destroyed() { }, // ������������ - ������������
+  activated() { },
   // ������������
   methods: {
     // ������������������������
@@ -301,7 +278,10 @@
           //   }
           // }
           for (let i = 0; i < 3; i++) {
-            newLineChartData.series.push({ data: [], name: '', type: 'line' })
+            newLineChartData.series.push({
+              data: [], name: '', type: 'line', triggerLineEvent: true,
+              emphasis: { focus: 'series' }
+            })
             for (let j = 0; j < data.length; j++) {
               newLineChartData.series[i].data.push(data[j].values[i])
               newLineChartData.series[i].name = this.seriesName[i]
@@ -395,21 +375,25 @@
   display: flex;
   margin-bottom: 20px;
   padding: 20px 15px 0 15px;
+
   span:first-child {
     flex: 1;
   }
+
   div:last-child {
     width: 300px;
     line-height: 40px;
     padding-left: 6px;
   }
 }
+
 .topTitle {
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
   padding: 0 15px;
 }
+
 .btn1 {
   margin-left: 1%;
   height: 40px;
diff --git a/src/views/contrast/index.vue b/src/views/contrast/index.vue
index 330f7ff..ebe8eb3 100644
--- a/src/views/contrast/index.vue
+++ b/src/views/contrast/index.vue
@@ -1,22 +1,9 @@
-+<template>
+<template>
   <div style="width: 100%; height: 100%; margin:0 auto">
     <div class="topSelect">
-      <el-cascader
-        v-model="newMac"
-        :options="options"
-        clearable
-        placeholder="������������"
-        style="width: 354px"
-      />
-      <el-cascader
-        v-model="value"
-        :options="newSensor"
-        :props="props"
-        collapse-tags
-        clearable
-        placeholder="������������"
-        style="margin-left: 20px"
-      />
+      <el-cascader v-model="newMac" :options="options" clearable placeholder="������������" style="width: 354px" />
+      <el-cascader v-model="value" :options="newSensor" :props="props" collapse-tags clearable placeholder="������������"
+        style="margin-left: 20px" />
       <!-- <el-select v-model="value" placeholder="������������">
         <el-option
           v-for="item in newSensor"
@@ -31,25 +18,12 @@
       <!-- <el-radio-button label="������" />
         <el-radio-button label="���������" /> -->
       <!-- </el-radio-group>  -->
-      <el-select
-        v-model="radio1"
-        placeholder="���������"
-        style="margin-left: 20px"
-      >
-        <el-option
-          v-for="item in options1"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
+      <el-select v-model="radio1" placeholder="���������" style="margin-left: 20px">
+        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
       </el-select>
-      <component
-        :is="dataType"
-        class="select11"
-        style="padding-left: 0; margin-left: 20px; width: 160px"
-        @sendPickerChild="showPickerChild"
-      />
+      <component :is="dataType" class="select11" style="padding-left: 0; margin-left: 20px; width: 160px"
+        @sendPickerChild="showPickerChild" />
       <!--������������-->
       <el-button @click="selectData" class="btn1">������</el-button>
     </div>
@@ -57,7 +31,7 @@
       <div style="position:absolute">(������:ug/m��)</div>
       <div style="text-align: center;width: 100%;">{{ newData }}��{{ newMac?newMac[0]:'' }}��{{ newMac?newMac[newMac.length - 1][0]:'' }}��{{ value |sensorFilter }}�����������</div>
     </div> -->
-    <LineChart :chart-data="lineChartData"  style="height: 40rem;"/>
+    <LineChart :chart-data="lineChartData" style="height: 40rem;" />
   </div>
 </template>
 
@@ -197,14 +171,14 @@
     this.getData()
   },
   // ������������ - ��������������������������� DOM ���������
-  mounted() {},
-  beforeCreate() {}, // ������������ - ������������
-  beforeMount() {}, // ������������ - ������������
-  beforeUpdate() {}, // ������������ - ������������
-  updated() {}, // ������������ - ������������
-  beforeDestroy() {}, // ������������ - ������������
-  destroyed() {}, // ������������ - ������������
-  activated() {},
+  mounted() { },
+  beforeCreate() { }, // ������������ - ������������
+  beforeMount() { }, // ������������ - ������������
+  beforeUpdate() { }, // ������������ - ������������
+  updated() { }, // ������������ - ������������
+  beforeDestroy() { }, // ������������ - ������������
+  destroyed() { }, // ������������ - ������������
+  activated() { },
   // ������������
   methods: {
     // ������������������������
@@ -274,7 +248,7 @@
         series: [],
         xAxis: [],
         title: [],
-        yAxis:[]
+        yAxis: []
       }
       this.newXData = []
       this.$request({
@@ -300,12 +274,15 @@
             newLineChartData.xAxis.push(data[0].timeValueList[i].time)
           }
           for (var i = 0; i < data.length; i++) {
-            newLineChartData.series.push({ data: [], name: '', type: 'line' ,yAxisIndex:data[i].code,lineStyle:{width:4}})
+            newLineChartData.series.push({
+              data: [], name: '', type: 'line', triggerLineEvent: true,
+              emphasis: { focus: 'series' }, lineStyle: { width: 4 }
+            })
             // newLineChartData.yAxis.push({})
             newLineChartData.series[i].name = data[i].name
             newLineChartData.title.push(data[i].name);
             for (var j = 0; j < data[i].timeValueList.length; j++) {
-             newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
+              newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
             }
           }
           this.lineChartData = newLineChartData
@@ -502,28 +479,34 @@
   display: flex;
   margin-bottom: 20px;
   padding: 20px 15px 0 15px;
+
   span:first-child {
     flex: 1;
   }
+
   div:last-child {
     width: 300px;
     line-height: 40px;
     padding-left: 6px;
   }
 }
+
 .topTitle {
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
   padding: 0 15px;
 }
+
 .btn1 {
   margin-left: 1%;
   height: 40px;
 }
+
 .select11 {
   width: 20% !important;
 }
+
 /deep/.el-date-editor .el-range-separator {
   width: 11%;
 }

--
Gitblit v1.8.0