修改 有用功率趋势分析页面

src/views/pqs/runManage/runEvaluate/components/region.vue

@@ -19,34 +19,13 @@ const height = mainHeight(300, 1.5)
 const options = ref({})
 const info = () => {
     let dataSource = [
-        { value: '90',  name: '张家口' },
-        { value: '80',  name: '廊坊' },
-        { value: '70',  name: '秦皇岛' },
-        { value: '60',  name: '唐山' },
-        { value: '50',  name: '承德' },
-    
+        { value: '90', name: '张家口' },
+        { value: '80', name: '廊坊' },
+        { value: '70', name: '秦皇岛' },
+        { value: '60', name: '唐山' },
+        { value: '50', name: '承德' }
     ]
     options.value = {
-        xAxis: {
-            type: 'value',
-            data:[10,100,200,300,400,500,600,700,800,900,1000],
-            axisLabel: {
-                show: true,
-                textStyle: {
-                    color: '#FFF'
-                }
-            },
-            splitLine: {
-                show: false
-            },
-            axisTick: {
-                show: false
-            },
-            axisLine: {
-                show: true
-            },
-           
-        },
         grid: {
             top: '10'
         },
@@ -62,8 +41,27 @@ const info = () => {
                 },
                 splitLine: {
                     show: false
+                }
+            },
+            xAxis: {
+                type: 'value',
+                data: [1, 2, 3, 4],
+                axisLabel: {
+                    show: true,
+                    textStyle: {
+                        color: '#FFF'
+                    },
+                    formatter: function (value) {}
                 },
-                
+                splitLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLine: {
+                    show: true
+                }
             },
             dataZoom: null,
             series: [
@@ -80,7 +78,48 @@ const info = () => {
                                 : '#CC0000'
                         }
                     },
-
+                    markLine: {
+                        silent: false,
+                        symbol: 'circle',
+                        data: [
+                            {
+                                name: '',
+                                yAxis: 100,
+                                lineStyle: {
+                                    color: '#009900'
+                                },
+                                label: {
+                                    show: true,
+                                    formatter: '优质',
+                                    color: '#009900'
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 90,
+                                lineStyle: {
+                                    color: '#77DA63'
+                                },
+                                label: {
+                                    show: true,
+                                    color: '#77DA63',
+                                    formatter: '良好'
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 60,
+                                lineStyle: {
+                                    color: '#FFCC00'
+                                },
+                                label: {
+                                    show: true,
+                                    color: '#FFCC00',
+                                    formatter: '合格'
+                                }
+                            }
+                        ]
+                    },
                     data: dataSource.map(item => item.value)
                 }
             ]
@@ -118,8 +157,8 @@ onMounted(() => {
     opacity: 1 !important;
     color: #ffffff;
     background: var(--el-color-primary);
-    
-    .el-radio-button__inner{
+
+    .el-radio-button__inner {
         opacity: 1 !important;
         border-left: 1px solid #00fff4 !important;
     }