feat: 优化折线图性能

.env.cloud

@@ -1,3 +1,3 @@
 VITE_APP_ENV = cloud
-VITE_BASE_URL = 'http://192.168.1.99:8080'
+VITE_BASE_URL = 'http://192.168.1.3:8080'
 VITE_ZMQ_BASE_URL = '192.168.1.99'

package.json

@@ -8,6 +8,7 @@
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
+    "cloud": "vite --mode cloud",
     "build:dev": "vite build --mode development",
     "build:cloud": "vite build --mode cloud",
     "type-check": "vue-tsc --build"

src/views/stationData/component/newDataChart.vue

@@ -82,7 +82,7 @@ const chartOption = computed<EChartsOption>(() => {
   loading.value = false
   const tmpSeries: SeriesOption[] = []
   for (const legend of props.legends.filter(item => item.addr !== 'ts')) {
-    const entry = props.chartDatas.get(legend.addr)
+    const entry = props.chartDatas.get(legend.addr) as Array<any>
     const lineData: SeriesOption = {
       name: legend.label,
       type: 'line',
@@ -90,6 +90,7 @@ const chartOption = computed<EChartsOption>(() => {
       // symbol: "none",
       connectNulls: true,
       data: entry,
+      sampling: 'lttb',
     }
     if (props.smooth) {
       lineData.smooth = true
@@ -98,6 +99,12 @@ const chartOption = computed<EChartsOption>(() => {
     }
     tmpSeries.push(lineData)
   }
+  const dataLength = tmpSeries.length * tmpSeries[0]?.data?.length || 0;
+  const visibleCount = Math.min(tmpSeries.length * 1000, dataLength);
+
+  const startPercent = dataLength === 0 ? 0 : ((dataLength - visibleCount) / dataLength) * 100;
+  const endPercent = 100;
+  const maxSpanPercent = dataLength === 0 ? 100 : (visibleCount / dataLength) * 100;
 
   const option: EChartsOption = {
     grid: {
@@ -186,31 +193,22 @@ const chartOption = computed<EChartsOption>(() => {
         type: 'inside',
         xAxisIndex: 0,
         filterMode: 'filter',
-        start: 90,
+        start: startPercent,
-        end: 100,
+        end: endPercent,
+        // maxSpan: maxSpanPercent,
       },
       {
         type: 'slider',
         xAxisIndex: 0,
-        filterMode: 'filter',
+        start: startPercent,
-        start: 90,
+        end: endPercent,
-        end: 100,
         height: ZOOM_HEIGHT,
-        bottom: `20%`,
+        bottom: '20%',
         borderColor: '#88abf5',
-        dataBackground: {
+        dataBackground: { lineStyle: { color: '#d2dbee' } },
-          lineStyle: {
+        selectedDataBackground: { lineStyle: { color: '#2c6cf7' } },
-            color: '#d2dbee',
+        moveHandleStyle: { color: '#2c6cf7' },
-          },
+        // maxSpan: maxSpanPercent,
-        },
-        selectedDataBackground: {
-          lineStyle: {
-            color: '#2c6cf7',
-          },
-        },
-        moveHandleStyle: {
-          color: '#2c6cf7',
-        },
       },
     ],
     series: tmpSeries,