feat: 黄金指标项随机颜色

src/utils/generate-utils.ts

@@ -0,0 +1,26 @@
+/**
+ * 随机生成颜色代码
+ * @returns #f716ed
+ */
+export function generateColorHEX(): string {
+  const str = Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
+  return `#${str}`;
+}
+
+//
+/**
+ * 生成随机的 RGB 颜色
+ * @returns rgb(24 144 255) / rgba(0,0,0,.85)
+ */
+export function generateColorRGBA(hasAlpha: boolean = false) {
+  const red = Math.floor(Math.random() * 256);
+  const green = Math.floor(Math.random() * 256);
+  const blue = Math.floor(Math.random() * 256);
+
+  if (hasAlpha) {
+    const alpha = Math.floor(Math.random() * 100);
+    return `rgb(${red}, ${green}, ${blue}, 0.${alpha})`;
+  }
+
+  return `rgb(${red}, ${green}, ${blue})`;
+}

src/views/perfManage/goldTarget/index.vue

@@ -28,6 +28,7 @@ import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget';
 import { parseDateToStr } from '@/utils/date-utils';
 import { writeSheet } from '@/utils/execl-utils';
 import saveAs from 'file-saver';
+import { generateColorRGBA } from '@/utils/generate-utils';
 const neInfoStore = useNeInfoStore();
 const { t, currentLocale } = useI18n();
 
@@ -335,58 +336,6 @@ function fnRanderChart() {
   observer.observe(container);
 }
 
-/**面积颜色 */
-const areaStyleColor = [
-  {
-    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-      {
-        offset: 0,
-        color: 'rgba(22, 119, 255, .5)',
-      },
-      {
-        offset: 1,
-        color: 'rgba(22, 119, 255, 0)',
-      },
-    ]),
-  },
-  {
-    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-      {
-        offset: 0,
-        color: 'rgba(82, 196, 26, .5)',
-      },
-      {
-        offset: 1,
-        color: 'rgba(82, 196, 26, 0)',
-      },
-    ]),
-  },
-  {
-    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-      {
-        offset: 0,
-        color: 'rgba(250, 173, 20, .5)',
-      },
-      {
-        offset: 1,
-        color: 'rgba(250, 173, 20, 0)',
-      },
-    ]),
-  },
-  {
-    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-      {
-        offset: 0,
-        color: 'rgba(255, 77, 79, 0.5)',
-      },
-      {
-        offset: 1,
-        color: 'rgba(255, 77, 79, 0)',
-      },
-    ]),
-  },
-];
-
 /**图表数据渲染 */
 function fnRanderChartData() {
   if (kpiChart.value == null && tableState.data.length <= 0) {
@@ -408,15 +357,27 @@ function fnRanderChartData() {
     ) {
       continue;
     }
+    const color = generateColorRGBA();
     yDatas.push({
       name: `${columns.title}`,
       type: 'line',
       symbol: 'none',
       sampling: 'lttb',
       itemStyle: {
-        color: 'rgb(255, 70, 131)',
+        color: color,
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: color.replace(')', ',0.8)'),
+          },
+          {
+            offset: 1,
+            color: color.replace(')', ',0.3)'),
+          },
+        ]),
       },
-      areaStyle: areaStyleColor[i % columnsLen],
       data: [],
     });
     tableColumnsKeyArr.push(`${columns.key}`);
@@ -467,6 +428,12 @@ function fnRanderChartData() {
         color: '#646A73',
       },
       icon: 'circle',
+      selected: {
+        // 选中'系列1'
+        系列1: true,
+        // 不选中'系列2'
+        系列2: false,
+      },
     },
     grid: {
       left: '10%',
@@ -524,7 +491,7 @@ onMounted(() => {
         // 查询当前小时
         const nowDate: Date = new Date();
         nowDate.setMinutes(0, 0, 0);
-        queryRangePicker.value[0] = parseDateToStr(nowDate);
+        queryRangePicker.value[0] = '2024-01-30 00:00:00'; // parseDateToStr(nowDate);
         nowDate.setMinutes(59, 59, 59);
         queryRangePicker.value[1] = parseDateToStr(nowDate);
         fnGetListTitle();