图表的封装

src/assets/js/constants/echarts-config/Cp.js

@@ -0,0 +1,140 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-19 16:22:48
+ * @LastEditTime: 2024-11-20 09:46:14
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/Cp.js
+//  */
+// 风能利用系数图
+// 用途：分析风能利用系数（Cp）与风速或叶尖速比的关系。
+// 适用场景：风机效率优化。
+// 实现建议：
+// 使用 ECharts 的折线图或散点图。
+export const option = {
+  title: {
+    text: "风速与功率输出对比",
+    x: "40%",
+    y: "8%",
+  },
+  xAxis: {
+    type: "value",
+    scale: true,
+    max: 30, // 风速最大值为30m/s，视具体数据调整
+    axisLabel: {
+      show: true,
+      interval: "auto",
+      formatter: "{value} m/s", // 风速单位：m/s
+    },
+    show: true,
+    name: "风速（m/s）",
+    nameLocation: "center",
+    nameTextStyle: {
+      padding: [20, 0, 0, 0],
+    },
+  },
+  yAxis: {
+    type: "value",
+    scale: true,
+    axisLabel: {
+      show: true,
+      interval: "auto",
+      formatter: "{value} kW", // 功率单位：kW
+    },
+    show: true,
+    name: "功率输出（kW）",
+    nameLocation: "center",
+    nameTextStyle: {
+      padding: [0, 0, 30, 0],
+    },
+  },
+  grid: {
+    left: "15%",
+    right: "15%",
+    bottom: "15%",
+    top: "15%",
+    containLabel: true,
+  },
+  legend: {
+    top: "90%",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  tooltip: {
+    show: true,
+    trigger: "axis",
+    formatter: function (params) {
+      let type = params[0].componentSubType;
+      if (type === "scatter") {
+        let index = params[0];
+        return (
+          "风机型号:  " +
+          index.seriesName +
+          "</br>" +
+          "风速:&nbsp;" +
+          index.data[0] +
+          " m/s</br>" +
+          "功率输出:&nbsp;&nbsp;" +
+          index.data[1] +
+          " kW</br>"
+        );
+      }
+    },
+  },
+  series: [
+    {
+      name: "风机A（型号1）",
+      type: "line",
+      data: [
+        [0, 0],
+        [30, 120], // 假设风速为30 m/s时功率输出为120 kW
+      ],
+      lineStyle: { color: "#144464" }, // 折线颜色
+      renderMode: "webgl", // 启用 WebGL 渲染
+    },
+    {
+      name: "风机B（型号2）",
+      type: "line",
+      data: [
+        [0, 0],
+        [30, 100], // 假设风速为30 m/s时功率输出为100 kW
+      ],
+      lineStyle: { color: "#e4641c" }, // 折线颜色
+      renderMode: "webgl", // 启用 WebGL 渲染
+    },
+    {
+      name: "风机A 散点",
+      symbolSize: 8,
+      color: "#348ccc",
+      data: [
+        [3, 2], // 风速为3 m/s时的功率输出为2 kW
+        [6, 5], // 风速为6 m/s时的功率输出为5 kW
+        [9, 12], // 风速为9 m/s时的功率输出为12 kW
+        [15, 35], // 风速为15 m/s时的功率输出为35 kW
+        [18, 60], // 风速为18 m/s时的功率输出为60 kW
+      ],
+      type: "scatter",
+      renderMode: "webgl", // 启用 WebGL 渲染
+    },
+    {
+      name: "风机B 散点",
+      symbolSize: 10,
+      color: "#e4bc2c",
+      data: [
+        [4, 3], // 风速为4 m/s时的功率输出为3 kW
+        [8, 8], // 风速为8 m/s时的功率输出为8 kW
+        [12, 20], // 风速为12 m/s时的功率输出为20 kW
+        [16, 50], // 风速为16 m/s时的功率输出为50 kW
+        [20, 80], // 风速为20 m/s时的功率输出为80 kW
+      ],
+      type: "scatter",
+      renderMode: "webgl", // 启用 WebGL 渲染
+    },
+  ],
+};

src/assets/js/constants/echarts-config/Heatmap.js

@@ -0,0 +1,55 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:13:21
+ * @LastEditTime: 2024-11-20 09:47:51
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/Heatmap.js
+ */
+//Heatmap-热力图
+// 风速随时间和风向的分布
+export const option = {
+  tooltip: {
+    position: "top",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      //   magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  xAxis: {
+    type: "category",
+    data: ["00:00", "01:00", "02:00", "03:00"], // 时间
+    name: "时间",
+  },
+  yAxis: {
+    type: "category",
+    data: ["0°", "90°", "180°", "270°"], // 风向
+    name: "风向",
+  },
+  visualMap: {
+    min: 0,
+    max: 20, // 风速范围
+    calculable: true,
+    orient: "horizontal",
+    left: "center",
+    bottom: "15%",
+  },
+  series: [
+    {
+      name: "风速",
+      type: "heatmap",
+      data: [
+        [0, 0, 5],
+        [1, 0, 10],
+        [2, 0, 15],
+        [0, 1, 7],
+        [1, 1, 8],
+        [2, 1, 12],
+      ], // [x, y, 风速值]
+    },
+  ],
+};

src/assets/js/constants/echarts-config/barandline.js

@@ -24,6 +24,14 @@ export const option = {
       saveAsImage: { show: true },
     },
   },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
   legend: {
     data: ["Evaporation", "Precipitation", "Temperature"],
   },

src/assets/js/constants/echarts-config/boxPlot.js

@@ -0,0 +1,44 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:14:10
+ * @LastEditTime: 2024-11-20 09:46:01
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/boxPlot.js
+ */
+//箱线图-boxPlot
+//不同季节的风速分布
+export const option = {
+  tooltip: {
+    trigger: "item",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      // magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  xAxis: {
+    type: "category",
+    data: ["春季", "夏季", "秋季", "冬季"],
+    name: "季节",
+  },
+  yAxis: {
+    type: "value",
+    name: "风速 (m/s)",
+  },
+  series: [
+    {
+      name: "风速分布",
+      type: "boxplot",
+      data: [
+        [1.5, 5, 7, 12, 20], // 最小值, Q1, 中位数, Q3, 最大值
+        [2, 6, 8, 14, 22],
+        [1, 4, 6, 10, 18],
+        [0.5, 3, 5, 8, 15],
+      ],
+    },
+  ],
+};

src/assets/js/constants/echarts-config/hexbin.js

@@ -0,0 +1,51 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:17:31
+ * @LastEditTime: 2024-11-20 09:31:26
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/hexbin.js
+ */
+// 蜂巢图-Hexbin
+// 风速和风向的联合分布
+export const option = {
+  tooltip: {
+    trigger: "item",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  xAxis: {
+    type: "value",
+    name: "风向 (°)",
+  },
+  yAxis: {
+    type: "value",
+    name: "风速 (m/s)",
+  },
+  series: [
+    {
+      name: "风速分布",
+      type: "scatter",
+      data: [
+        [45, 5],
+        [90, 10],
+        [180, 7],
+        [270, 12],
+        [50, 8],
+        [100, 11],
+        [190, 9],
+        [280, 14],
+      ],
+      symbolSize: 5,
+      emphasis: {
+        focus: "series",
+      },
+    },
+  ],
+};

src/assets/js/constants/echarts-config/histogram.js

@@ -0,0 +1,42 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-19 16:24:20
+ * @LastEditTime: 2024-11-19 16:58:13
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/histogram.js
+ */
+// 风速分布直方图
+// 用途：显示不同风速范围内的频率分布。
+// 适用场景：风速频率统计、资源分布分析。
+// 实现建议：
+// 使用 ECharts 的直方图。
+export const option = {
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  xAxis: {
+    name: "风速范围 (m/s)",
+    type: "category",
+    data: ["0-2", "2-4", "4-6", "6-8", "8-10", ">10"],
+  },
+  yAxis: {
+    name: "频率 (%)",
+    type: "value",
+  },
+  series: [
+    {
+      name: "风速分布",
+      type: "bar",
+      data: [5, 20, 35, 25, 10, 5], // 每个风速范围的频率
+    },
+  ],
+  tooltip: {
+    trigger: "axis",
+  },
+};

src/assets/js/constants/echarts-config/line.js

@@ -1,3 +1,9 @@
+// 风速-功率曲线图
+// 用途：展示风速与风机输出功率之间的关系。
+// 适用场景：风机性能评估、功率曲线优化。
+// 实现建议：
+// 使用 ECharts 的折线图。
+// xAxis 为风速，yAxis 为功率。
 export const option = {
   title: {
     text: "Stacked Line",
@@ -17,17 +23,14 @@ export const option = {
       saveAsImage: { show: true },
     },
   },
-  toolbox: {
-    feature: {
-      saveAsImage: {},
-    },
-  },
   xAxis: {
-    type: "category",
-    boundaryGap: false,
-    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    type: "value",
+    name: "风速 (m/s)",
+    // boundaryGap: false,
+    // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
   },
   yAxis: {
+    name: "功率 (kW)",
     type: "value",
     nameLocation: "middle", // 设置名称位置，可以是 'start', 'middle' 或 'end'
     nameTextStyle: {
@@ -44,34 +47,16 @@ export const option = {
   },
   series: [
     {
-      name: "Email",
-      type: "line",
-      stack: "Total",
-      data: [120, 132, 101, 134, 90, 230, 210],
-    },
-    {
-      name: "Union Ads",
-      type: "line",
-      stack: "Total",
-      data: [220, 182, 191, 234, 290, 330, 310],
-    },
-    {
-      name: "Video Ads",
-      type: "line",
-      stack: "Total",
-      data: [150, 232, 201, 154, 190, 330, 410],
-    },
-    {
-      name: "Direct",
-      type: "line",
-      stack: "Total",
-      data: [320, 332, 301, 334, 390, 330, 320],
-    },
-    {
-      name: "Search Engine",
+      name: "功率曲线",
       type: "line",
-      stack: "Total",
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      data: [
+        [2, 0],
+        [4, 200],
+        [6, 400],
+        [8, 800],
+        [10, 1200],
+        [12, 1500],
+      ], // 风速与功率对应数据
     },
   ],
 };

src/assets/js/constants/echarts-config/pareto.js

@@ -0,0 +1,66 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:19:45
+ * @LastEditTime: 2024-11-20 09:46:35
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/pareto.js
+ */
+// 帕累托图-pareto
+// 风电场设备故障类型及累积影响
+// 帕累托图通常用于显示数据的分类贡献和累积比例。
+export const option = {
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+    },
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  grid: {
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    data: ["变压器故障", "叶片破损", "发电机故障", "控制系统故障", "其他"],
+    name: "故障类型",
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: "故障频率",
+    },
+    {
+      type: "value",
+      name: "累积百分比 (%)",
+      max: 100,
+    },
+  ],
+  series: [
+    {
+      name: "故障频率",
+      type: "bar",
+      data: [50, 30, 10, 5, 5],
+      itemStyle: {
+        color: "#5793f3",
+      },
+    },
+    {
+      name: "累积百分比",
+      type: "line",
+      yAxisIndex: 1,
+      data: [50, 80, 90, 95, 100],
+      smooth: true,
+      lineStyle: {
+        color: "#d14a61",
+      },
+    },
+  ],
+};

src/assets/js/constants/echarts-config/pie.js

@@ -1,40 +1,45 @@
+// 风电场发电量来源占比
+// 饼图用于显示不同类别占比，直观展现数据的构成情况。
 export const option = {
+  title: {
+    text: "风电场发电量来源占比",
+    left: "center",
+  },
   tooltip: {
     trigger: "item",
-    formatter: "{a} <br/>{b}: {c} ({d}%)",
+    formatter: "{b}: {c} MWh ({d}%)",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      // magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
   },
   legend: {
     orient: "vertical",
-    left: 10,
-    data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
+    left: "left",
+    data: ["风速 1-5 m/s", "风速 5-10 m/s", "风速 10-15 m/s", "风速 15+ m/s"],
   },
   series: [
     {
-      name: "访问来源",
+      name: "发电量占比",
       type: "pie",
-      radius: ["50%", "70%"],
-      avoidLabelOverlap: false,
-      label: {
-        show: false,
-        position: "center",
-      },
+      radius: "60%",
+      data: [
+        { value: 300, name: "风速 1-5 m/s" },
+        { value: 500, name: "风速 5-10 m/s" },
+        { value: 400, name: "风速 10-15 m/s" },
+        { value: 200, name: "风速 15+ m/s" },
+      ],
       emphasis: {
-        label: {
-          show: true,
-          fontSize: "30",
-          fontWeight: "bold",
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)",
         },
       },
-      labelLine: {
-        show: false,
-      },
-      data: [
-        { value: 335, name: "直接访问" },
-        { value: 310, name: "邮件营销" },
-        { value: 234, name: "联盟广告" },
-        { value: 135, name: "视频广告" },
-        { value: 1548, name: "搜索引擎" },
-      ],
     },
   ],
 };

src/assets/js/constants/echarts-config/radar.js

@@ -1,41 +1,42 @@
 /*
  * @Author: your name
  * @Date: 2024-11-04 11:33:31
- * @LastEditTime: 2024-11-04 11:34:44
+ * @LastEditTime: 2024-11-20 09:50:04
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/radar.js
  */
+// 雷达图-radar
+// 示例：不同风电场的性能评价
 export const option = {
-  title: {
-    text: "Basic Radar Chart",
-  },
-  legend: {
-    data: ["Allocated Budget", "Actual Spending"],
-  },
+  tooltip: {},
   radar: {
-    // shape: 'circle',
     indicator: [
-      { name: "Sales", max: 6500 },
-      { name: "Administration", max: 16000 },
-      { name: "Information Technology", max: 30000 },
-      { name: "Customer Support", max: 38000 },
-      { name: "Development", max: 52000 },
-      { name: "Marketing", max: 25000 },
+      { name: "风速", max: 20 },
+      { name: "发电量", max: 5000 },
+      { name: "利用系数", max: 1 },
     ],
   },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      // magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
   series: [
     {
-      name: "Budget vs spending",
+      name: "风电场性能",
       type: "radar",
       data: [
         {
-          value: [4200, 3000, 20000, 35000, 50000, 18000],
-          name: "Allocated Budget",
+          value: [12, 4000, 0.8],
+          name: "风电场 A",
         },
         {
-          value: [5000, 14000, 28000, 26000, 42000, 21000],
-          name: "Actual Spending",
+          value: [15, 4500, 0.85],
+          name: "风电场 B",
         },
       ],
     },

src/assets/js/constants/echarts-config/roseChart.js

@@ -0,0 +1,42 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-19 16:18:07
+ * @LastEditTime: 2024-11-19 16:58:24
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/roseChart.js
+ */
+// 风玫瑰图（Wind Rose Chart）
+// 用途：显示不同方向的风速或风力分布。
+// 适用场景：风场选址、风资源评估。
+// 实现建议：
+// ECharts 的极坐标 + 柱状图。
+// 使用 polar 和 radiusAxis 配置。
+export const option = {
+  angleAxis: {
+    type: "category",
+    data: ["N", "NE", "E", "SE", "S", "SW", "W", "NW"], // 风向
+    boundaryGap: false,
+  },
+  radiusAxis: {},
+  polar: {},
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  series: [
+    {
+      type: "bar",
+      data: [15, 25, 30, 20, 10, 5, 8, 12], // 风速数据
+      coordinateSystem: "polar",
+      name: "风速",
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};

src/assets/js/constants/echarts-config/sankeyDiagram.js

@@ -0,0 +1,58 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:20:45
+ * @LastEditTime: 2024-11-20 10:18:54
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/sankeyDiagram.js
+ */
+// 流图-sankeyDiagram
+// 示例：风能转化过程的能量流 -流图用于分析风能利用效率及能量流失情况。
+// 流图用于显示能量或资源在不同阶段的流动和分配。
+export const option = {
+  title: {
+    text: "风能转化过程的能量流失情况",
+  },
+  tooltip: {
+    trigger: "item",
+    formatter: "{b}: {c}",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      // magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  series: [
+    {
+      type: "sankey",
+      layout: "none",
+      emphasis: {
+        focus: "adjacency",
+      },
+      data: [
+        { name: "风能" },
+        { name: "风轮" },
+        { name: "发电机" },
+        { name: "电网" },
+        { name: "损耗" },
+      ],
+      links: [
+        { source: "风能", target: "风轮", value: 100 },
+        { source: "风轮", target: "发电机", value: 70 },
+        { source: "发电机", target: "电网", value: 60 },
+        { source: "风轮", target: "损耗", value: 30 },
+        { source: "发电机", target: "损耗", value: 10 },
+      ],
+      lineStyle: {
+        color: "gradient",
+        curveness: 0.5,
+      },
+      label: {
+        color: "#333",
+      },
+    },
+  ],
+};

src/assets/js/constants/echarts-config/scatter.js

@@ -1,57 +1,37 @@
-/*
- * @Author: your name
- * @Date: 2024-11-04 11:33:04
- * @LastEditTime: 2024-11-06 10:44:57
- * @LastEditors: milo-MacBook-Pro.local
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/assets/js/constants/echarts-config/scatter.js
- */
 export const option = {
-  title: {
-    text: "Dynamic Data",
-  },
   xAxis: {
+    name: "风向 (°)",
     type: "value",
-    name: "xlable",
+    min: 0,
+    max: 360,
   },
   yAxis: {
+    name: "风速 (m/s)",
     type: "value",
-    name: "温度",
   },
-  grid: {
-    top: "20%",
-    right: "20%",
-    bottom: "10%",
-    containLabel: true, // 包含标签在内
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
   },
   series: [
     {
-      symbolSize: 20,
+      name: "风速分布",
+      type: "scatter",
       data: [
-        [10.0, 8.04],
-        [8.07, 6.95],
-        [13.0, 7.58],
-        [9.05, 8.81],
-        [11.0, 8.33],
-        [14.0, 7.66],
-        [13.4, 6.81],
-        [10.0, 6.33],
-        [14.0, 8.96],
-        [12.5, 6.82],
-        [9.15, 7.2],
-        [11.5, 7.2],
-        [3.03, 4.23],
-        [12.2, 7.83],
-        [2.02, 4.47],
-        [1.05, 3.33],
-        [4.05, 4.96],
-        [6.03, 7.24],
-        [12.0, 6.26],
-        [12.0, 8.84],
-        [7.08, 5.82],
-        [5.02, 5.68],
-      ],
-      type: "scatterGL",
+        [45, 5, 10],
+        [90, 10, 20],
+        [180, 7, 15],
+        [270, 12, 25],
+      ], // [风向, 风速, 数据点大小]
+      symbolSize: (data) => data[2], // 根据大小调整气泡尺寸
+      renderMode: "webgl", // 启用 WebGL 渲染
     },
   ],
+  tooltip: {
+    trigger: "item",
+  },
 };

src/assets/js/constants/echarts-config/stackedBar.js

@@ -0,0 +1,54 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-19 16:25:10
+ * @LastEditTime: 2024-11-19 16:32:28
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/stackedBar.js
+ */
+// 风机状态堆叠柱状图
+// 用途：显示风机在不同状态（运行、停机、故障）下的时间分布。
+// 适用场景：风机运行监控。
+// 实现建议：
+// 使用堆叠柱状图。
+export const option = {
+  xAxis: {
+    type: "category",
+    data: ["风机1", "风机2", "风机3", "风机4"], // 风机编号
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  yAxis: {
+    name: "时间 (小时)",
+    type: "value",
+  },
+  series: [
+    {
+      name: "运行",
+      type: "bar",
+      stack: "总量",
+      data: [10, 15, 20, 25],
+    },
+    {
+      name: "停机",
+      type: "bar",
+      stack: "总量",
+      data: [5, 5, 4, 6],
+    },
+    {
+      name: "故障",
+      type: "bar",
+      stack: "总量",
+      data: [1, 0, 2, 3],
+    },
+  ],
+  tooltip: {
+    trigger: "axis",
+  },
+};

src/assets/js/constants/echarts-config/timeSeries.js

@@ -0,0 +1,39 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:16:47
+ * @LastEditTime: 2024-11-20 09:47:16
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/timeSeries.js
+ */
+//时间序列图 timeSeries
+//风速变化趋势
+export const option = {
+  tooltip: {
+    trigger: "axis",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  xAxis: {
+    type: "category",
+    data: ["00:00", "06:00", "12:00", "18:00", "24:00"],
+    name: "时间",
+  },
+  yAxis: {
+    type: "value",
+    name: "风速 (m/s)",
+  },
+  series: [
+    {
+      name: "风速",
+      type: "line",
+      data: [5, 7, 10, 8, 6],
+    },
+  ],
+};

src/assets/js/constants/echarts-config/waterfall.js

@@ -0,0 +1,40 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:15:50
+ * @LastEditTime: 2024-11-20 09:16:16
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/waterfall.js
+ */
+// 瀑布图-Waterfall
+// 示例：风速到发电量的损耗分析
+export const option = {
+  xAxis: {
+    type: "category",
+    data: ["风速", "风轮效率", "发电功率"],
+    name: "阶段",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  yAxis: {
+    type: "value",
+    name: "能量 (kWh)",
+  },
+  series: [
+    {
+      name: "能量损耗",
+      type: "bar",
+      stack: "total",
+      data: [1000, -200, -300], // 每阶段能量值
+      itemStyle: {
+        color: (params) => (params.value < 0 ? "#d14a61" : "#5793f3"),
+      },
+    },
+  ],
+};

src/assets/js/constants/index.js

@@ -1,27 +1,62 @@
 export const charts = [
   {
-    name: "折线图",
+    type: "bar",
+    name: "直方图",
+  },
+  {
+    type: "scatter",
+    name: "散点图",
+  },
+  {
     type: "line",
+    name: "折线图",
   },
   {
-    name: "柱状图",
-    type: "bar",
+    type: "radar",
+    name: "雷达图",
   },
   {
-    name: "饼图",
     type: "pie",
+    name: "饼图",
   },
-
   {
-    type: "scatter",
-    name: "散点图",
+    type: "roseChart",
+    name: "玫瑰图",
   },
   {
-    type: "barandline",
-    name: "柱状折线图",
+    type: "Cp",
+    name: "散点折线图",
   },
   {
-    type: "radar",
-    name: "雷达图",
+    type: "stackedBar",
+    name: "堆叠柱状图",
+  },
+  {
+    type: "pareto",
+    name: "帕累托图",
+  },
+  {
+    type: "sankeyDiagram",
+    name: "流图",
+  },
+  // {
+  //   type: "hexbin",
+  //   name: "蜂巢图",
+  // },
+  // {
+  //   type: "timeSeries",
+  //   name: "时间序列图",
+  // },
+  {
+    type: "waterfall",
+    name: "瀑布图",
+  },
+  {
+    type: "boxPlot",
+    name: "箱线图",
+  },
+  {
+    type: "Heatmap",
+    name: "热力图",
   },
 ];

src/icons/svg/Cp.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1732005845039" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21396" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#ffffff" p-id="21397" data-spm-anchor-id="a313x.search_index.0.i11.6c813a81Ph1dIF" class="selected"></path><path d="M921.6 921.6H102.4V102.4h33.8944v780.356267H921.6V921.6zM547.84 367.9232a68.266667 68.266667 0 1 0 136.4992 0 68.266667 68.266667 0 0 0-136.533333 0z" fill="#57a0c6" p-id="21398" data-spm-anchor-id="a313x.search_index.0.i12.6c813a81Ph1dIF" class=""></path><path d="M620.7488 733.2864a68.266667 68.266667 0 1 1-136.533333-0.068267 68.266667 68.266667 0 0 1 136.533333 0.068267z" fill="#57a0c6" p-id="21399" data-spm-anchor-id="a313x.search_index.0.i13.6c813a81Ph1dIF" class=""></path><path d="M876.782933 107.349333a17.066667 17.066667 0 0 1 9.659734 22.1184c-80.657067 205.5168-157.9008 347.784533-263.031467 457.386667-105.198933 109.806933-237.1584 185.617067-424.8576 260.5056a17.066667 17.066667 0 0 1-12.629333-31.709867c185.5488-74.069333 312.4224-147.626667 412.8768-252.381866 100.522667-104.891733 175.786667-242.312533 255.863466-446.2592a17.066667 17.066667 0 0 1 22.1184-9.659734z" fill="#bfbfbf" p-id="21400" data-spm-anchor-id="a313x.search_index.0.i14.6c813a81Ph1dIF" class="selected"></path><path d="M221.730133 690.722133a68.266667 68.266667 0 1 0 136.533334 0 68.266667 68.266667 0 0 0-136.533334 0zM784.9984 307.0976a68.266667 68.266667 0 1 0 136.533333 0 68.266667 68.266667 0 0 0-136.533333 0z" fill="#eeb173" p-id="21401" data-spm-anchor-id="a313x.search_index.0.i15.6c813a81Ph1dIF" class=""></path></svg>

src/icons/svg/Heatmap.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1732066930220" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="53854" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" p-id="53855"></path><path d="M944 928v16H79.84v-16z" fill="#E6E6E6" p-id="53856"></path><path d="M128 128h144v144H128zM128 544h144v144H128zM544 336h144v144h-144zM544 752h144v144h-144z" fill="#BF444C" opacity=".95" p-id="53857"></path><path d="M336 128h144v144h-144zM336 544h144v144h-144z" fill="#EAC392" opacity=".95" p-id="53858"></path><path d="M544 128h144v144h-144zM544 544h144v144h-144zM752 336h144v144h-144zM752 752h144v144h-144zM128 336h144v144H128zM128 752h144v144H128z" fill="#F0D99C" opacity=".95" p-id="53859"></path><path d="M752 128h144v144h-144zM752 544h144v144h-144zM336 336h144v144h-144zM336 752h144v144h-144z" fill="#DE987C" opacity=".95" p-id="53860"></path></svg>

src/icons/svg/histogram.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1732005686328" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11713" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M229.333333 341.333333v480h-160V341.333333h160z m181.333334-106.666666v586.666666h-160V234.666667h160z m362.666666 53.333333v533.333333h-160V288h160z m181.333334 138.666667v394.666666h-160V426.666667h160z" fill="#001E59" fill-opacity=".3" p-id="11714"></path><path d="M981.333333 864v32H42.666667v-32h938.666666zM592 128v693.333333h-160V128h160z" fill="#00102F" fill-opacity=".75" p-id="11715"></path></svg>

src/icons/svg/waterfall.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1732066795849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40610" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M623.995259 111.995259h99.991704v497.000297h-99.991704z" fill="#0BCC93" p-id="40611"></path><path d="M247.99763 288.995556h99.991703v491.008h-99.991703z" fill="#4ABCFA" p-id="40612"></path><path d="M811.994074 111.009185h99.991704v355.991704H811.994074z" fill="#9387FD" p-id="40613"></path><path d="M435.996444 288.995556h99.991704v283.003259h-99.991704z" fill="#3B64E9" p-id="40614"></path><path d="M152.007111 111.995259v759.99763h759.99763v40.011852H111.995259V111.995259z" fill="#D1DDF8" p-id="40615"></path></svg>

src/store/dragChart.js

@@ -1,13 +1,6 @@
-/*
- * @Author: your name
- * @Date: 2024-11-04 10:06:23
- * @LastEditTime: 2024-11-18 15:27:25
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/store/dragChart.js
- */
 import { SCALE } from "@/assets/js/constants/config.js";
 import { Message } from "element-ui";
+import { clearAllDataFromIndexedDB } from "@/utils/indexedDb";
 const _ = require("lodash");
 
 export default {
@@ -44,10 +37,12 @@ export default {
         dataBaseCheckList: {},
         triggerGetData: false,
         updateTriggerGetData: false,
+        formFilterAlignData: [],
         relatedFieldsData: [], //关联字段表
         formFilterAlign: [],
       };
-
+      //清空indexeddb 数据库
+      // clearAllDataFromIndexedDB();
       // 遍历重置每个字段
       Object.keys(resetState).forEach((key) => {
         state[key] = resetState[key];

src/utils/indexedDb.js

@@ -100,6 +100,14 @@ export async function clearAllDataFromIndexedDB() {
 
     versionRequest.onsuccess = (event) => {
       const db = event.target.result;
+
+      // 检查对象存储是否存在
+      if (!db.objectStoreNames.contains("files")) {
+        console.log("Object store 'files' does not exist. No action needed.");
+        db.close();
+        return resolve();
+      }
+
       const currentVersion = db.version;
       db.close();
 

src/views/performance/components/custonAsCom/dragChart/components/chartsAttributes.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-11-01 10:14:11
- * @LastEditTime: 2024-11-18 09:36:53
+ * @LastEditTime: 2024-11-20 09:55:34
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartsContent.vue
@@ -82,7 +82,7 @@ export default {
       svgIcon: [
         {
           type: "bar",
-          name: "柱状图",
+          name: "直方图",
         },
         {
           type: "scatter",
@@ -92,9 +92,38 @@ export default {
           type: "line",
           name: "折线图",
         },
+
+        {
+          type: "Cp",
+          name: "散点折线图",
+        },
+        {
+          type: "stackedBar",
+          name: "堆叠柱状图",
+        },
+        {
+          type: "pareto",
+          name: "帕累托图",
+        },
         {
-          type: "barandline",
-          name: "柱状折线图",
+          type: "sankeyDiagram",
+          name: "流图",
+        },
+        // {
+        //   type: "hexbin",
+        //   name: "蜂巢图",
+        // },
+        // {
+        //   type: "timeSeries",
+        //   name: "时间序列图",
+        // },
+        {
+          type: "waterfall",
+          name: "瀑布图",
+        },
+        {
+          type: "boxPlot",
+          name: "箱线图",
         },
         {
           type: "radar",
@@ -104,6 +133,14 @@ export default {
           type: "pie",
           name: "饼图",
         },
+        {
+          type: "roseChart",
+          name: "玫瑰图",
+        },
+        {
+          type: "Heatmap",
+          name: "热力图",
+        },
       ],
     };
   },