fix图表主题修改

src/views/performance/components/chartsCom/BarChart.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:30:17
- * @LastEditTime: 2025-02-28 09:23:52
- * @LastEditors: milo-MacBook-Pro.local
+ * @LastEditTime: 2025-03-13 16:10:58
+ * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart.vue
 -->
@@ -132,9 +132,15 @@ export default {
         title: chartDataset.title, // 图表标题
         xaxis: {
           title: this.chartData.xaixs || "X轴", // 横坐标标题
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         yaxis: {
           title: this.chartData.yaixs || "Y轴", // 纵坐标标题
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         margin: {
           l: 50,
@@ -142,6 +148,9 @@ export default {
           t: 50,
           b: 50,
         },
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff",
+        bgcolor: "#e5ecf6", // 设置背景颜色
         autosize: true, // 开启自适应
       };
       if (

src/views/performance/components/chartsCom/BoxLineCharts.vue

@@ -163,12 +163,15 @@ export default {
         y: filteredData.yData,
         type: "box",
         marker: {
-          color: "lightgray",
+          color: "#263649",
+        },
+        line: {
+          width: 0.8, // 这里设置线条粗细（默认是 2）
         },
         boxpoints: false,
         boxmean: false,
         name: filteredData.title,
-        fillcolor: "#406DAB", // 设置箱线图填充颜色，带透明度
+        fillcolor: "#458EF7", // 设置箱线图填充颜色，带透明度
         hovertemplate:
           `${this.chartData.xaixs}:` +
           ` %{x} <br> ` +
@@ -196,9 +199,20 @@ export default {
         xaxis: {
           title: this.chartData.xaixs,
           tickmode: "array",
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
+        },
+        yaxis: {
+          title: this.chartData.yaixs,
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
-        yaxis: { title: this.chartData.yaixs },
         showlegend: true,
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff",
+        bgcolor: "#e5ecf6", // 设置背景颜色
       };
       if (
         this.chartData.xaixs === "机组" ||

src/views/performance/components/chartsCom/BoxMarkersCharts.vue

@@ -144,9 +144,12 @@ export default {
           type: "box",
           name: group.title,
           marker: {
-            color: group.color,
+            color: "#263649",
           },
-          fillcolor: "#406DAB", // 设置箱线图填充颜色，带透明度
+          line: {
+            width: 0.8, // 这里设置线条粗细（默认是 2）
+          },
+          fillcolor: "#458EF7", // 设置箱线图填充颜色，带透明度
           boxpoints: false, // 是否显示异常值
           boxmean: true, // 是否显示均值
           hovertemplate: (data) => {
@@ -182,7 +185,7 @@ export default {
             y: group.medians.y,
             mode: "markers",
             marker: {
-              color: "#406DAB",
+              color: "#f00",
               size: 3,
             },
             name: `${group.title} - 中位点`,
@@ -198,10 +201,19 @@ export default {
           title: xaixs,
           type: "date",
           tickformat: "%Y-%m-%d",
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         yaxis: {
           title: yaixs,
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff",
+        bgcolor: "#e5ecf6", // 设置背景颜色
         showlegend: true,
       };
       const getChartSetUp = (axisTitle) => {

src/views/performance/components/chartsCom/FaultAll.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-15 14:24:59
- * @LastEditTime: 2025-02-21 17:22:22
+ * @LastEditTime: 2025-03-13 16:23:46
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/FaultAll.vue
@@ -96,6 +96,9 @@ export default {
           tickmode: "array",
           tickvals: this.faultTypes.slice(0, 10),
           tickfont: { size: 12 },
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         yaxis: {
           title: "故障次数",
@@ -104,6 +107,9 @@ export default {
           side: "left", // 左侧的 Y 轴
           showline: true,
           linecolor: "#64ADC2",
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         yaxis2: {
           title: "故障时长 (分钟)",
@@ -116,6 +122,9 @@ export default {
           linecolor: "#1A295D", // 设置右侧轴线颜色
         },
         barmode: "group", // 柱状图分组
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff",
+        bgcolor: "#e5ecf6", // 设置背景颜色
         showlegend: false,
         // legend: {
         //   //   x: 1, // 设置 legend 水平位置

src/views/performance/components/chartsCom/FaultUnit.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-15 15:49:57
- * @LastEditTime: 2025-02-21 17:22:38
+ * @LastEditTime: 2025-03-13 16:25:02
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/FaultUntal.vue
@@ -80,6 +80,9 @@ export default {
           tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
           ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
           tickfont: { size: 12 },
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         yaxis: {
           title: "故障次数",
@@ -88,6 +91,9 @@ export default {
           side: "left", // 左侧的 Y 轴
           showline: true,
           linecolor: "#64ADC2",
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         yaxis2: {
           title: "故障时长(秒)",
@@ -97,10 +103,14 @@ export default {
           side: "right", // 右侧的 Y 轴
           position: 1, // 调整右侧轴的位置
           showline: true,
+
           // tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
           // ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
           linecolor: "#1A295D", // 设置右侧轴线颜色
         },
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff",
+        bgcolor: "#e5ecf6", // 设置背景颜色
         showlegend: false, // 显示图例
         margin: {
           t: 80, // 上边距

src/views/performance/components/chartsCom/GeneratorTemperature.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-21 11:18:49
- * @LastEditTime: 2025-02-26 14:49:53
+ * @LastEditTime: 2025-03-13 16:27:13
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/GeneratorTemperature.vue
@@ -178,9 +178,15 @@ export default {
         title: this.chartData.title,
         xaxis: {
           title: this.chartData.xaixs || "X轴", // 横坐标标题
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         yaxis: {
           title: this.chartData.yaixs || "Y轴", // 纵坐标标题
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         margin: {
           l: 50,
@@ -188,6 +194,9 @@ export default {
           t: 50,
           b: 50,
         },
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff",
+        bgcolor: "#e5ecf6", // 设置背景颜色
         autosize: true, // 开启自适应
         barmode: this.chartType === "bar" ? "stack" : "group", // 如果是柱状图则启用堆叠
       };

src/views/performance/components/chartsCom/YewErrorBarChart.vue

@@ -144,9 +144,15 @@ export default {
           tickmode: "array",
           tickvals: xData, // 设置刻度值（机组编号）
           ticktext: xData, // 设置刻度文本（机组编号）
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         yaxis: {
           title: "静态偏航误差值（度）", // 纵坐标标题
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         margin: {
           l: 50,
@@ -154,6 +160,9 @@ export default {
           t: 50,
           b: 50,
         },
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff",
+        bgcolor: "#e5ecf6", // 设置背景颜色
         autosize: true, // 开启自适应
         showlegend: true, // 显示图例
         legend: {

src/views/performance/components/chartsCom/lineAndChildLine.vue

@@ -172,9 +172,15 @@ export default {
         title: this.chartData.title,
         xaxis: {
           title: this.chartData.xaixs || "X轴", // 横坐标标题
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         yaxis: {
           title: this.chartData.yaixs || "Y轴", // 纵坐标标题
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         margin: {
           l: 50,
@@ -182,6 +188,9 @@ export default {
           t: 50,
           b: 50,
         },
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff",
+        bgcolor: "#e5ecf6", // 设置背景颜色
         autosize: true, // 开启自适应
         barmode: this.chartType === "bar" ? "stack" : "group", // 如果是柱状图则启用堆叠
       };

src/views/performance/components/chartsCom/lineChartsFen.vue

@@ -186,9 +186,15 @@ export default {
         title: this.chartData.title || "图表",
         xaxis: {
           title: this.chartData.xaixs || "X轴",
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         yaxis: {
           title: this.chartData.yaixs || "Y轴",
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         margin: {
           l: 50,
@@ -197,6 +203,9 @@ export default {
           b: 50,
         },
         autosize: true,
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff",
+        bgcolor: "#e5ecf6", // 设置背景颜色
         barmode: this.chartType === "bar" ? "stack" : "group",
       };
       const getChartSetUp = (axisTitle) => {

src/views/performance/components/chartsCom/yawErrorBarSum.vue

@@ -125,9 +125,15 @@ export default {
         title: "静态偏航误差的绝对值机组台数分布情况", // 图表标题
         xaxis: {
           title: "静态偏航误差值（度）", // 横坐标标题
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         yaxis: {
           title: "台数", // 纵坐标标题
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
         },
         margin: {
           l: 50,
@@ -137,6 +143,9 @@ export default {
         },
         autosize: true, // 开启自适应
         showlegend: true, // 显示图例
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff",
+        bgcolor: "#e5ecf6", // 设置背景颜色
       };
 
       // 渲染图表

src/views/performance/components/chartsCom/yawErrorLine.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-22 09:42:59
- * @LastEditTime: 2025-02-26 11:37:55
+ * @LastEditTime: 2025-03-13 16:30:03
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/yawErrorLine.vue
@@ -175,9 +175,15 @@ export default {
       const layout = {
         title: this.chartData.data[0].title,
         xaxis: {
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
           title: this.chartData.xaixs || "X轴", // 横坐标标题
         },
         yaxis: {
+          gridcolor: "rgb(255,255,255)",
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
           title: this.chartData.yaixs || "Y轴", // 纵坐标标题
         },
         margin: {
@@ -186,6 +192,9 @@ export default {
           t: 50,
           b: 50,
         },
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff",
+        bgcolor: "#e5ecf6", // 设置背景颜色
         autosize: true, // 开启自适应
         barmode: this.chartType === "bar" ? "stack" : "group", // 如果是柱状图则启用堆叠
       };