From e94ea7f723e616a0566ac5c7f9d77435333d9e92 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期六, 11 五月 2024 17:38:20 +0800
Subject: [PATCH] 实时走航

---
 src/utils/chart/chart-option.js |  160 +++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 129 insertions(+), 31 deletions(-)

diff --git a/src/utils/chart/chart-option.js b/src/utils/chart/chart-option.js
index 556a0bb..06357e1 100644
--- a/src/utils/chart/chart-option.js
+++ b/src/utils/chart/chart-option.js
@@ -15,7 +15,7 @@
 }
 
 // 鎶樼嚎鍥�
-function factorLineOption(_xAxis, _series, legends) {
+function factorLineOption(_xAxis, _series) {
   var fontSize = fGetChartFontSize();
   return {
     animationEasing: 'elasticOut',
@@ -39,7 +39,7 @@
     },
     legend: {
       type: 'scroll',
-      data: legends,
+      // data: legends,
       left: 0,
       textStyle: {
         fontSize: fontSize,
@@ -94,35 +94,128 @@
       },
       minInterval: 1
     },
-    series: _series,
-    dataZoom: [
-      {
-        type: 'inside',
-        start: 0,
-        end: 100
+    series: _series
+  };
+}
+
+// 鎶樼嚎鍥�
+function smallLineOption(_xAxis, _series) {
+  var fontSize = fGetChartFontSize();
+  return {
+    animationEasing: 'elasticOut',
+    animationDelayUpdate: function (idx) {
+      return idx * 5;
+    },
+    tooltip: {
+      textStyle: {
+        fontSize: fontSize
       }
-    ]
+    },
+    grid: {
+      left: '11%',
+      right: '2%',
+      top: '7%',
+      bottom: '20%'
+    },
+    legend: {
+      show: false
+    },
+    xAxis: [
+      {
+        show: true,
+        // name: '鏃堕棿',
+        // type: 'time',
+        data: _xAxis,
+        axisLabel: {
+          textStyle: {
+            fontSize: fontSize
+          },
+          color: '#ffffff',
+          textBorderColor: '#fff'
+        },
+        axisTick: {
+          lineStyle: {
+            color: 'white'
+          },
+          intervel: 0,
+          inside: false
+        },
+
+        nameTextStyle: {
+          color: '#ffffff'
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#ffffff'
+          }
+        }
+      },
+      { show: true }
+    ],
+    yAxis: [
+      {
+        // name: '娴撳害(渭g/m鲁)',
+        // type: 'time',
+        axisLabel: {
+          textStyle: {
+            fontSize: fontSize
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: 'white'
+          }
+        },
+        axisTick: {
+          show: false,
+          lineStyle: {
+            color: 'white'
+          }
+        },
+        splitLine: {
+          show: false
+        },
+        minInterval: 1,
+        intervel: 1,
+        min: function (value) {
+          return Math.floor(value.min);
+        },
+        max: function (value) {
+          return Math.ceil(value.max);
+        }
+      },
+      {
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: 'white'
+          }
+        }
+      }
+    ],
+    series: _series
   };
 }
 
 // 浠〃鐩�
 function gaugeOption(name, value) {
-  var fontSize = fGetChartFontSize();
+  // var fontSize = fGetChartFontSize();
   var option = {
-    title: {
-      text: name,
-      textStyle: {
-        color: 'white',
-        fontSize: fontSize
-      },
-      left: 'center'
-    },
+    // title: {
+    //   text: name,
+    //   textStyle: {
+    //     color: 'white',
+    //     fontSize: fontSize
+    //   },
+    //   left: 'center'
+    // },
     textStyle: {
       color: '#ffffff',
       fontSize: 10
     },
     tooltip: {
-      formatter: '{a} <br/>{b} : {c}%'
+      formatter: '{a} : {c}km/h'
     },
     toolbox: {
       // feature: {
@@ -134,12 +227,17 @@
       {
         name: name,
         type: 'gauge',
+        title: {
+          color: 'white',
+          offsetCenter: [0, '50%']
+        },
         detail: {
           color: 'white',
-          formatter: '{value}',
+          formatter: '{value}km/h',
           textStyle: {
-            fontSize: fontSize
-          }
+            fontSize: 18
+          },
+          offsetCenter: [0, '80%']
         },
         splitLine: {
           lineStyle: {
@@ -156,13 +254,13 @@
           fontSize: 10
         },
         axisLine: {
-          lineStyle: {
-            color: [
-              [0.2, '#2afd2a'],
-              [0.8, '#f1e74d'],
-              [1, '#c23531']
-            ]
-          }
+          // lineStyle: {
+          //   color: [
+          //     [0.2, '#2afd2a'],
+          //     [0.8, '#f1e74d'],
+          //     [1, '#c23531']
+          //   ]
+          // }
         },
         itemStyle: {
           color: 'white'
@@ -170,7 +268,7 @@
         data: [
           {
             value: value,
-            name: ''
+            name: '杞﹂��'
           }
         ],
         min: 0,
@@ -181,4 +279,4 @@
   return option;
 }
 
-export { factorLineOption, gaugeOption };
+export { factorLineOption, smallLineOption, gaugeOption };

--
Gitblit v1.9.3