更新

src/assets/less/uStyle.css

@@ -64,3 +64,6 @@
   border-image-repeat: stretch;
   position: relative;
 }
+.h100 {
+  height: 100%;
+}

src/assets/less/uStyle.less

@@ -21,4 +21,6 @@
   border-image: url('../visualization/moduleBdBg.png') 4 4 fill;
   border-image-repeat: stretch;
   position: relative;
-}
+}
+
+.h100{height: 100%;}

src/views/modules_guAn/visualization/components/commonTitle.vue

@@ -36,6 +36,7 @@ export default {
     background: url(../../../../assets/visualization/moduleTitle.png) no-repeat left bottom;
     background-size: 100% 10px;
     .module-title{
+      font-size: 15px;
       color: #18B4C8;
       font-style: italic; /* 设置文字为斜体 */
       margin-left: 15px;

src/views/modules_guAn/visualization/index.vue

@@ -16,17 +16,54 @@
         </div>
         <div class="left-center-con">
           <!-- 左中 -->
-          <data-curve></data-curve>
+          <real-time-curve></real-time-curve>
         </div>
         <div class="left-bottom-con">
           <!-- 左下 -->
-          <test-information></test-information>
+          <!-- <test-information></test-information> -->
+          <full-curve></full-curve>
         </div>
       </div>
       <!-- 中间部分 -->
       <div class="center-container">
         <div class="important">
-          我是3D区域
+          <!-- 我是3D区域 -->
+          <!-- <div class="u-flex" style="color: #fff;width: 100%; height: 100%;flex-direction: column;align-items: center;">
+            <div class="u-flex-cjac" style="width: 100%;">
+              <div style="height: 30px;">I机组</div>
+              <div class="u-flex-jaa" style="width: 100%;">
+                <div>
+                  <div class="f1">I1压机吸气：(111) bar</div>
+                  <div class="f1">I2压机吸气：(2) bar</div>
+                  <div class="f1">J1压机吸气：(11) bar</div>
+                  <div class="f1">J1压机排气：() bar</div>
+                </div>
+                <div>
+                  <div class="f1">I2压机排气：(4)bar</div>
+                  <div class="f1">J2压机吸气：(0) bar</div>
+                  <div class="f1">J2压机排气：() bar</div>
+                  <div class="f1">I1压机排气:(33333333333333333333)bar</div>
+                </div>
+              </div>
+            </div>
+            <div class="u-flex-cjac" style="width: 100%;">
+              <div style="height: 30px;">I机组</div>
+              <div class="u-flex-jaa" style="width: 100%;">
+                <div>
+                  <div class="f1">I1压机吸气：(1111111111) bar</div>
+                  <div class="f1">I2压机吸气：(2) bar</div>
+                  <div class="f1">J1压机吸气：(11) bar</div>
+                  <div class="f1">J1压机排气：() bar</div>
+                </div>
+                <div>
+                  <div class="f1">I2压机排气：(4)bar</div>
+                  <div class="f1">J2压机吸气：(0) bar</div>
+                  <div class="f1">J2压机排气：() bar</div>
+                  <div class="f1">I1压机排气:(33333333333)bar</div>
+                </div>
+              </div>
+            </div>
+          </div> -->
         </div>
         <div class="centen-bottom-con u-flex-jab">
           <!-- 中间 -->
@@ -58,8 +95,9 @@
 </template>
 
 <script>
-import DataCurve from './modules/DataCurve.vue'
 import YuzhiCurve from './modules/YuzhiCurve.vue'
+import RealTimeCurve from './modules/RealTimeCurve.vue'
+import FullCurve from './modules/FullCurve.vue'
 import RunningState from './modules/RunningState.vue'
 import EquipmentInfo from './modules/EquipmentInfo.vue'
 import ModeInfo from './modules/ModeInfo.vue'
@@ -71,7 +109,8 @@ export default {
     name: '',
     components: {
       YuzhiCurve,
-      DataCurve,
+      RealTimeCurve,
+      FullCurve,
       RunningState,
       EquipmentInfo,
       ModeInfo,
@@ -108,7 +147,7 @@ export default {
       left: 0;
       right: 0;
       // border: 1px solid #000;
-      height: 70px;
+      height: 72px;
       text-align: center;
       // line-height: 22px;
       .title-content{
@@ -117,18 +156,26 @@ export default {
         background: url(../../../assets/visualization/pageTitleBg.png) no-repeat center center;
         background-size: auto 100%;
         .text{
-          font-size: 24px;
-          font-weight: 1000;
-          letter-spacing: .2em;
-          text-shadow: 2px 2px 2px rgb(10, 37, 92);
+          font-size: 28px;
+          color: transparent;
+          // font-weight: bold;
+          // 描边 变相加粗
+          -webkit-text-stroke: 0.4px;
+          letter-spacing: .15em;
+          text-shadow: 1px 2px 2px rgb(10, 37, 92);
+          // text-shadow: 1px 2px 2px rgba(10, 68, 134, .67);
           position: relative;
-          font-family: serif;
+          font-family: "黑体";
+          // font-family: "宋体";
+          // font-family: serif;
+          // font-family: "楷体_GB2312		";
           &::before{
             // content: attr(text); // div中设置了text=>相当于又写了一个标题覆盖在原来设置了阴影的文字上面
             content: '高温高湿试验项目';
             position: absolute;
             z-index: 10;
             background-image: linear-gradient(to bottom, #ffffff, #8DD4F7);
+            // background-image: linear-gradient(to bottom, #ffffff, #7ed7fb);
             -webkit-background-clip: text;
             color: transparent;
             // 去除集成父级样式
@@ -163,8 +210,8 @@ export default {
         .important{
           width: 100%;
           height: 70%;
-          text-align: center;
-          line-height: 500px;
+          // text-align: center;
+          // line-height: 500px;
         }
         .centen-bottom-con{
           height: 30%;

src/views/modules_guAn/visualization/modules/DataCurve.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="data-curve-module">
-    <common-title title="数据查看和提取"></common-title>    
-    <div class="visualization-common-border">
-
-    </div>
-  </div>
-</template>
-
-<script>
-import commonTitle from '../components/commonTitle.vue'
-
-export default {
-  components: { commonTitle },
-  name: '',
-  data () {
-    return {
-    }
-  },
-  created () {
-  },
-  mounted () {
-  },
-  methods: {
-  }
-}
-</script>
-
-<style scoped>
-  @import '~@assets/less/uStyle.less';
-</style>
-<style lang="less">
-  .data-curve-module{
-    width: 100%;
-    height: 100%;
-  }
-</style>

src/views/modules_guAn/visualization/modules/FullCurve.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="data-curve-module">
+    <!-- <common-title title="数据查看和提取"></common-title>     -->
+    <div style="height: 22.5px;"></div>
+    <div class="visualization-common-border">
+      <div ref="dataCurve" class="h100"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+import commonTitle from '../components/commonTitle.vue'
+
+export default {
+  components: { commonTitle },
+  name: '',
+  data () {
+    return {
+      uEcharts: null,
+      uOption: null,
+      legendData: [
+        { name: '辐射强度值', value: 9000 },
+        { name: '温度实值', value: 50 },
+        { name: '湿度实值', value: 60.3 },
+      ]
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initDataCurve()
+    })
+  },
+  methods: {
+    initDataCurve(){
+      var _this = this
+      this.uEcharts = echarts.init(this.$refs.dataCurve);
+      this.uOption = {
+        color: ['#07D626', '#E30106', '#E39106'], // legend对应颜色
+        grid: {
+          // top: '70',
+          left: '46',
+          bottom: '40'
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: { show: false }, // 横坐标刻度
+          boundaryGap: false, // 坐标轴两边留白(刻度跟数据对应)
+          axisLine: { // 横坐标线样式
+            lineStyle: {
+              color: 'rgba(255,255,255,.1)',
+            },
+          },
+          axisLabel: {
+            textStyle: { // 坐标轴文字
+              color: '#fff'
+            }
+          },
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: { // 纵坐标样式
+              textStyle: {
+                color: '#fff',
+              }
+            },
+            splitLine: { // 网格线
+              show: true, // 是否显示
+              lineStyle: { // 网格线样式
+                color: 'rgba(255,255,255,.1)', // 网格线颜色
+                width: 1, //网格线的加粗程度
+                // type: 'dashed' // 网格线类型 dashed:虚线
+              }
+            },
+            name: '光照强度W/㎡', // 刻度
+            nameTextStyle: {
+              color: '#fff',
+              padding: [0, 0, 0, 20],
+            },
+          },
+          {
+            type: 'value',
+            axisLabel: { // 纵坐标样式
+              textStyle: {
+                color: '#fff',
+              }
+            },
+            splitLine: { // 网格线
+              show: true, // 是否显示
+              lineStyle: { // 网格线样式
+                color: 'rgba(255,255,255,.1)', // 网格线颜色
+                width: 1, //网格线的加粗程度
+                // type: 'dashed' // 网格线类型 dashed:虚线
+              }
+            },
+            name: '温湿度值/℃/%', // 刻度
+            nameTextStyle: {
+              color: '#fff',
+              // padding: [0, 0, 0, 20],
+            },
+          },
+        ],
+        legend: {
+          icon: "roundRect", // 样式改为方形rect，改为圆角方形roundRect
+          itemWidth: 14, // 宽度
+          itemHeight: 6, // 高度
+          textStyle: {
+            color: '#fff',
+            fontSize: 11
+          },
+          top: '15',
+          // 使用回调函数
+          formatter: function (name) {
+            console.log(name)
+            var currentObj = _this.legendData.find(item => item.name === name)
+            return name + '：' + currentObj.value;
+          },
+          data: _this.legendData.map(item => item.name),
+        },
+        series: [
+          {
+            name: '辐射强度值',
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line',
+            // symbol: 'circle',
+            // symbolSize: 2,
+            showSymbol: false, // 只有在 tooltip hover 的时候显示symbol
+            // itemStyle: { // symbol样式
+            //   normal: {
+            //     color: 'rgb(255, 255, 255)',
+            //     borderColor: 'rgba(255, 255, 255, 0.2)', // symbol边框颜色
+            //     borderWidth: 12 // symbol边框宽度
+            //   }
+            // },
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgb(7, 214, 38, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(7, 214, 38)'
+                  }, 
+                  {
+                    offset: 1,
+                    color: 'rgb(7, 214, 38, 0)'
+                  }
+                ])
+              }
+            }
+          },
+          {
+            name: '温度实值',
+            type: 'line',
+            yAxisIndex: 1, // 关联第几个y轴
+            showSymbol: false,
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgb(227, 1, 6, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(227, 1, 6)'
+                  }, 
+                  {
+                    offset: 1,
+                    color: 'rgb(227, 1, 6, 0)'
+                  }
+                ])
+              }
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: '湿度实值',
+            type: 'line',
+            yAxisIndex: 1, // 关联第几个y轴
+            showSymbol: false,
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgb(227, 145, 6, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(227, 145, 6)'
+                  }, 
+                  {
+                    offset: 1,
+                    color: 'rgb(227, 145, 6, 0)'
+                  }
+                ])
+              }
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          }
+        ]
+      };
+      this.uOption && this.uEcharts.setOption(this.uOption)
+      window.addEventListener("resize",function (){
+        this.uEcharts.resize();
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .data-curve-module{
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/modules_guAn/visualization/modules/RealTimeCurve.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="data-curve-module">
+    <common-title title="数据查看和提取"></common-title>    
+    <div class="visualization-common-border">
+      <div ref="dataCurve" class="h100"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+import commonTitle from '../components/commonTitle.vue'
+
+export default {
+  components: { commonTitle },
+  name: '',
+  data () {
+    return {
+      uEcharts: null,
+      uOption: null,
+      legendData: [
+        { name: '辐射强度值', value: 9000 },
+        { name: '温度实值', value: 50 },
+        { name: '湿度实值', value: 60.3 },
+      ]
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initDataCurve()
+    })
+  },
+  methods: {
+    initDataCurve(){
+      var _this = this
+      this.uEcharts = echarts.init(this.$refs.dataCurve);
+      this.uOption = {
+        color: ['rgb(255, 0, 255)', 'rgb(255, 105, 5)', 'rgb(91, 255, 255)'], // legend对应颜色
+        grid: {
+          // top: '70',
+          left: '46',
+          bottom: '40'
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: { show: false }, // 横坐标刻度
+          boundaryGap: false, // 坐标轴两边留白(刻度跟数据对应)
+          axisLine: { // 横坐标线样式
+            lineStyle: {
+              color: 'rgba(255,255,255,.1)',
+            },
+          },
+          axisLabel: {
+            textStyle: { // 坐标轴文字
+              color: '#fff'
+            }
+          },
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: { // 纵坐标样式
+              textStyle: {
+                color: '#fff',
+              }
+            },
+            splitLine: { // 网格线
+              show: true, // 是否显示
+              lineStyle: { // 网格线样式
+                color: 'rgba(255,255,255,.1)', // 网格线颜色
+                width: 1, //网格线的加粗程度
+                // type: 'dashed' // 网格线类型 dashed:虚线
+              }
+            },
+            name: '光照强度W/㎡', // 刻度
+            nameTextStyle: {
+              color: '#fff',
+              padding: [0, 0, 0, 20],
+            },
+          },
+          {
+            type: 'value',
+            axisLabel: { // 纵坐标样式
+              textStyle: {
+                color: '#fff',
+              }
+            },
+            splitLine: { // 网格线
+              show: true, // 是否显示
+              lineStyle: { // 网格线样式
+                color: 'rgba(255,255,255,.1)', // 网格线颜色
+                width: 1, //网格线的加粗程度
+                // type: 'dashed' // 网格线类型 dashed:虚线
+              }
+            },
+            name: '温湿度值/℃/%', // 刻度
+            nameTextStyle: {
+              color: '#fff',
+              // padding: [0, 0, 0, 20],
+            },
+          },
+        ],
+        legend: {
+          icon: "roundRect", // 样式改为方形rect，改为圆角方形roundRect
+          itemWidth: 14, // 宽度
+          itemHeight: 6, // 高度
+          textStyle: {
+            color: '#fff',
+            fontSize: 11
+          },
+          top: '15',
+          // 使用回调函数
+          formatter: function (name) {
+            console.log(name)
+            var currentObj = _this.legendData.find(item => item.name === name)
+            return name + '：' + currentObj.value;
+          },
+          data: _this.legendData.map(item => item.name),
+        },
+        series: [
+          {
+            name: '辐射强度值',
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line',
+            // symbol: 'circle',
+            // symbolSize: 2,
+            showSymbol: false, // 只有在 tooltip hover 的时候显示symbol
+            // itemStyle: { // symbol样式
+            //   normal: {
+            //     color: 'rgb(255, 255, 255)',
+            //     borderColor: 'rgba(255, 255, 255, 0.2)', // symbol边框颜色
+            //     borderWidth: 12 // symbol边框宽度
+            //   }
+            // },
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgb(255, 0, 255, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(255, 0, 255)'
+                  }, 
+                  {
+                    offset: 1,
+                    color: 'rgb(255, 0, 255, 0)'
+                  }
+                ])
+              }
+            }
+          },
+          {
+            name: '温度实值',
+            type: 'line',
+            yAxisIndex: 1, // 关联第几个y轴
+            showSymbol: false,
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgb(255, 105, 0, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(255, 105, 5)'
+                  }, 
+                  {
+                    offset: 1,
+                    color: 'rgb(255, 0, 0, 0)'
+                  }
+                ])
+              }
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: '湿度实值',
+            type: 'line',
+            yAxisIndex: 1, // 关联第几个y轴
+            showSymbol: false,
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgb(0, 255, 255, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(91, 255, 255)'
+                  }, 
+                  {
+                    offset: 1,
+                    color: 'rgb(0, 255, 255, 0)'
+                  }
+                ])
+              }
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          }
+        ]
+      };
+      this.uOption && this.uEcharts.setOption(this.uOption)
+      window.addEventListener("resize",function (){
+        this.uEcharts.resize();
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .data-curve-module{
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/modules_guAn/visualization/modules/TestStatusInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="test-statusInfo-module">
-    <common-title title="试验状态信息"></common-title>    
+    <common-title title="试验状态信息"></common-title>
     <div class="visualization-common-border box">
       <div>
         <div class="item">

src/views/modules_guAn/visualization/modules/YuzhiCurve.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="yuzhi-curve-module">
-    <common-title title="预制曲线"></common-title>    
+    <common-title title="预制曲线"></common-title>
     <div class="visualization-common-border">
-
+      <div ref="yuzhiCurve" class="h100"></div>
     </div>
   </div>
 </template>
 
 <script>
+import * as echarts from "echarts"
 import commonTitle from '../components/commonTitle.vue'
 
 export default {
@@ -15,13 +16,204 @@ export default {
   name: '',
   data () {
     return {
+      uEcharts: null,
+      uOption: null,
+      legendData: [
+        { name: '辐射强度值', value: 9000 },
+        { name: '温度实值', value: 50 },
+        { name: '湿度实值', value: 60.3 },
+      ]
     }
   },
   created () {
   },
   mounted () {
+    this.$nextTick(() => {
+      this.initYuzhiCurve()
+    })
   },
   methods: {
+    initYuzhiCurve(){
+      var _this = this
+      this.uEcharts = echarts.init(this.$refs.yuzhiCurve);
+      this.uOption = {
+        color: ['#0102c8', '#cfa809', '#49e4e9'], // legend对应颜色
+        grid: {
+          // top: '70',
+          left: '46',
+          bottom: '40'
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: { show: false }, // 横坐标刻度
+          boundaryGap: false, // 坐标轴两边留白(刻度跟数据对应)
+          axisLine: { // 横坐标线样式
+            lineStyle: {
+              color: 'rgba(255,255,255,.1)',
+            },
+          },
+          axisLabel: {
+            textStyle: { // 坐标轴文字
+              color: '#fff'
+            }
+          },
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: { // 纵坐标样式
+              textStyle: {
+                color: '#fff',
+              }
+            },
+            splitLine: { // 网格线
+              show: true, // 是否显示
+              lineStyle: { // 网格线样式
+                color: 'rgba(255,255,255,.1)', // 网格线颜色
+                width: 1, //网格线的加粗程度
+                // type: 'dashed' // 网格线类型 dashed:虚线
+              }
+            },
+            name: '光照强度W/㎡', // 刻度
+            nameTextStyle: {
+              color: '#fff',
+              padding: [0, 0, 0, 20],
+            },
+          },
+          {
+            type: 'value',
+            axisLabel: { // 纵坐标样式
+              textStyle: {
+                color: '#fff',
+              }
+            },
+            splitLine: { // 网格线
+              show: true, // 是否显示
+              lineStyle: { // 网格线样式
+                color: 'rgba(255,255,255,.1)', // 网格线颜色
+                width: 1, //网格线的加粗程度
+                // type: 'dashed' // 网格线类型 dashed:虚线
+              }
+            },
+            name: '温湿度值/℃/%', // 刻度
+            nameTextStyle: {
+              color: '#fff',
+              // padding: [0, 0, 0, 20],
+            },
+          },
+        ],
+        legend: {
+          icon: "roundRect", // 样式改为方形rect，改为圆角方形roundRect
+          itemWidth: 14, // 宽度
+          itemHeight: 6, // 高度
+          textStyle: {
+            color: '#fff',
+            fontSize: 11
+          },
+          top: '15',
+          // 使用回调函数
+          formatter: function (name) {
+            console.log(name)
+            var currentObj = _this.legendData.find(item => item.name === name)
+            return name + '：' + currentObj.value;
+          },
+          data: _this.legendData.map(item => item.name),
+        },
+        series: [
+          {
+            name: '辐射强度值',
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line',
+            // symbol: 'circle',
+            // symbolSize: 2,
+            showSymbol: false, // 只有在 tooltip hover 的时候显示symbol
+            // itemStyle: { // symbol样式
+            //   normal: {
+            //     color: 'rgb(255, 255, 255)',
+            //     borderColor: 'rgba(255, 255, 255, 0.2)', // symbol边框颜色
+            //     borderWidth: 12 // symbol边框宽度
+            //   }
+            // },
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgb(1, 2, 200, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(1, 2, 200)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(1, 2, 200, 0)'
+                  }
+                ])
+              }
+            }
+          },
+          {
+            name: '温度实值',
+            type: 'line',
+            yAxisIndex: 1, // 关联第几个y轴
+            showSymbol: false,
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgb(207, 168, 9, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(207, 168, 9)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(207, 168, 9, 0)'
+                  }
+                ])
+              }
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: '湿度实值',
+            type: 'line',
+            yAxisIndex: 1, // 关联第几个y轴
+            showSymbol: false,
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgb(73, 228, 233, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(73, 228, 233)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(73, 228, 233, 0)'
+                  }
+                ])
+              }
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          }
+        ]
+      };
+      this.uOption && this.uEcharts.setOption(this.uOption)
+      window.addEventListener("resize",function (){
+        this.uEcharts.resize();
+      });
+    }
   }
 }
 </script>