更新

src/views/analysis/warningAnalysis/connectAnalysis/components/echart-content.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { ref, nextTick, onMounted, watchEffect } from 'vue'
-import {plainOptions,echartColor} from '../connectAnalysis.data'
+import { plainOptions, } from '../connectAnalysis.data'
 import * as echarts from 'echarts';
 
 let props = defineProps({
@@ -17,7 +17,40 @@ let props = defineProps({
 })
 //获取dom元素节点
 let line = ref<any>();
+function initSeries(param) {
+  if (param.length) {
+  let data= param.map((el, index) => {
+      return {
+        name:plainOptions.find(v=>v.value==el.label)['label'],
+        type: 'line',
+        stack: '',
+        symbol: 'circle',
+        symbolSize: 0,
 
+        itemStyle: {
+          normal: {
+            color: plainOptions.find(v=>v.value==el.label)['color'],
+            lineStyle: {
+              color:plainOptions.find(v=>v.value==el.label)['color'],
+              width: 1
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                offset: 0,
+                color: plainOptions.find(v=>v.value==el.label)['areaColor'][0],
+              }, {
+                offset: 1,
+                color: plainOptions.find(v=>v.value==el.label)['areaColor'][1],
+              }]),
+            }
+          }
+        },
+        data: el.value
+      }
+    })
+    return data
+  }
+}
 
 
 function getOption(param) {
@@ -28,7 +61,7 @@ function getOption(param) {
         left: '2%',
         right: '2%',
         top: '6%',
-        bottom: '3%',
+        bottom: '2%',
         containLabel: true
       },
       tooltip: {
@@ -44,7 +77,8 @@ function getOption(param) {
           type: 'category',
           boundaryGap: false,
           axisLabel: {
-            color: '#74767b'
+            color: '#74767b',
+            overflow: 'truncate',
           },
           axisLine: {
             show: true,
@@ -130,7 +164,7 @@ function getOption(param) {
           }
         }
       ],
-    
+      // series: initSeries(param.yData)
       series: [
         {
           name: 'CO浓度(ppm)',
@@ -143,15 +177,15 @@ function getOption(param) {
               color: '#3bd97a',
               lineStyle: {
                 color: "#3bd97a",
-                width: 1
+                width: 1.5
               },
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                   offset: 0,
-                  color: 'rgba(59, 217, 122,0.2)'
+                  color: 'rgba(59, 217, 122,0.05)'
                 }, {
                   offset: 1,
-                  color: 'rgba(59, 217, 122,0.8)'
+                  color: 'rgba(59, 217, 122,0.3)'
                 }]),
               }
             }
@@ -177,16 +211,16 @@ function getOption(param) {
               color: '#f9c74a',
               lineStyle: {
                 color: "#f9c74a",
-                width: 1
+                width: 1.5
               },
               areaStyle: {
                 //color: '#94C9EC'
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                   offset: 0,
-                  color: 'rgba(249, 199, 74,0.2)'
+                  color: 'rgba(249, 199, 74,0.05)'
                 }, {
                   offset: 1,
-                  color: 'rgba(249, 199, 74,0.8)'
+                  color: 'rgba(249, 199, 74,0.3)'
                 }]),
               }
             }
@@ -204,16 +238,16 @@ function getOption(param) {
               color: '#ac7bf1',
               lineStyle: {
                 color: "#ac7bf1",
-                width: 1
+                width: 1.5
               },
               areaStyle: {
                 //color: '#94C9EC'
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                   offset: 0,
-                  color: 'rgba(172, 123, 241,0.2)'
+                  color: 'rgba(172, 123, 241,0.05)'
                 }, {
                   offset: 1,
-                  color: 'rgba(172, 123, 241,0.8)'
+                  color: 'rgba(172, 123, 241,0.3)'
                 }]),
               }
             }
@@ -231,16 +265,16 @@ function getOption(param) {
               color: '#50b2f9',
               lineStyle: {
                 color: "#50b2f9",
-                width: 1
+                width: 1.5
               },
               areaStyle: {
                 //color: '#94C9EC'
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                   offset: 0,
-                  color: 'rgba(80, 178, 249,0.2)'
+                  color: 'rgba(80, 178, 249,0.05)'
                 }, {
                   offset: 1,
-                  color: 'rgba(80, 178, 249,0.8)'
+                  color: 'rgba(80, 178, 249,0.3)'
                 }]),
               }
             }
@@ -258,16 +292,16 @@ function getOption(param) {
               color: '#1fd0da',
               lineStyle: {
                 color: "#1fd0da",
-                width: 1
+                width: 1.5
               },
               areaStyle: {
                 //color: '#94C9EC'
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                   offset: 0,
-                  color: 'rgba(31, 208, 218,0.2)'
+                  color: 'rgba(31, 208, 218,0.05)'
                 }, {
                   offset: 1,
-                  color: 'rgba(31, 208, 218,0.8)'
+                  color: 'rgba(31, 208, 218,0.3)'
                 }]),
               }
             }
@@ -285,16 +319,16 @@ function getOption(param) {
               color: '#ff6666',
               lineStyle: {
                 color: "#ff6666",
-                width: 1
+                width: 1.5
               },
               areaStyle: {
                 //color: '#94C9EC'
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                   offset: 0,
-                  color: 'rgba(255, 102, 102,0.2)'
+                  color: 'rgba(255, 102, 102,0.05)'
                 }, {
                   offset: 1,
-                  color: 'rgba(255, 102, 102,0.8)'
+                  color: 'rgba(255, 102, 102,0.3)'
                 }]),
               }
             }
@@ -312,16 +346,16 @@ function getOption(param) {
               color: '#3b4bd9',
               lineStyle: {
                 color: "#3b4bd9",
-                width: 1
+                width: 1.5
               },
               areaStyle: {
                 //color: '#94C9EC'
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                   offset: 0,
-                  color: 'rgba(59, 75, 217,0.2)'
+                  color: 'rgba(59, 75, 217,0.05)'
                 }, {
                   offset: 1,
-                  color: 'rgba(59, 75, 217,0.8)'
+                  color: 'rgba(59, 75, 217,0.3)'
                 }]),
               }
             }
@@ -339,16 +373,16 @@ function getOption(param) {
               color: '#f18736',
               lineStyle: {
                 color: "#f18736",
-                width: 1
+                width: 1.5
               },
               areaStyle: {
                 //color: '#94C9EC'
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                   offset: 0,
-                  color: 'rgba(241, 135, 54,0.2)'
+                  color: 'rgba(241, 135, 54,0.05)'
                 }, {
                   offset: 1,
-                  color: 'rgba(241, 135, 54,0.8)'
+                  color: 'rgba(241, 135, 54,0.3)'
                 }]),
               }
             }
@@ -365,9 +399,9 @@ function getOption(param) {
 }
 
 watchEffect(() => {
-  if (props.echartData.xData.length || props.echartData.yData.length) {
+ 
     props.echartData && getOption(props.echartData)
-  }
+  
 
 })