统计图优化

src/views/SmartScreen/ReportScreen/charts/chart1.vue

@@ -74,6 +74,7 @@ function updateData() {
             options.title = res.data.title
             options.xAxis.data = res.data.xAxis.data
             let _series = res.data.series
+
             _series.forEach((item) => {
                 item.label = {
                     show: true,
@@ -83,7 +84,31 @@ function updateData() {
                     formatter: '{c}',
                     color: '#fff'
                 }
+                // 定义一组颜色
+                const colors = [
+                    "#00b894",
+                    "#fdcb6e",
+                    "#ff7675",
+                    "#6c5ce7",
+                    "#00cec9",
+                    "#ffeaa7",
+                    "#fab1a0",
+                    "#ffbe76",
+                    "#74b9ff",
+                    "#55efc4",
+                    "#a29bfe",
+                    "#d63031",
+                    "#fd79a8",
+                    "#00bfa5",
+                    "#e17055"
+                ];
+                item.data.forEach((dataItem, index) => (
+                    dataItem.itemStyle = {
+                        color: colors[index % colors.length] // 使用与系列相同的颜色逻辑
+                    }
+                ))
             })
+            console.log(_series);
             options.series = _series
             chart.value.setOption(options)
         }

src/views/SmartScreen/ReportScreen/charts/chart2.vue

@@ -83,6 +83,29 @@ function updateData() {
                     formatter: '{c}',
                     color: '#fff'
                 }
+                // 定义一组颜色
+                const colors = [
+                    "#00b894",
+                    "#fdcb6e",
+                    "#ff7675",
+                    "#6c5ce7",
+                    "#00cec9",
+                    "#ffeaa7",
+                    "#fab1a0",
+                    "#ffbe76",
+                    "#74b9ff",
+                    "#55efc4",
+                    "#a29bfe",
+                    "#d63031",
+                    "#fd79a8",
+                    "#00bfa5",
+                    "#e17055"
+                ];
+                item.data.forEach((dataItem, index) => (
+                    dataItem.itemStyle = {
+                        color: colors[index % colors.length] // 使用与系列相同的颜色逻辑
+                    }
+                ))
             })
             options.series = _series
             chart.value.setOption(options)

src/views/SmartScreen/ReportScreen/charts/chart3.vue

@@ -83,6 +83,29 @@ function updateData() {
                     formatter: '{c}',
                     color: '#fff'
                 }
+                // 定义一组颜色
+                const colors = [
+                    "#00b894",
+                    "#fdcb6e",
+                    "#ff7675",
+                    "#6c5ce7",
+                    "#00cec9",
+                    "#ffeaa7",
+                    "#fab1a0",
+                    "#ffbe76",
+                    "#74b9ff",
+                    "#55efc4",
+                    "#a29bfe",
+                    "#d63031",
+                    "#fd79a8",
+                    "#00bfa5",
+                    "#e17055"
+                ];
+                item.data.forEach((dataItem, index) => (
+                    dataItem.itemStyle = {
+                        color: colors[index % colors.length] // 使用与系列相同的颜色逻辑
+                    }
+                ))
             })
             options.series = _series
             chart.value.setOption(options)

src/views/SmartScreen/ReportScreen/theme/chalk.json

@@ -1,5 +1,21 @@
 {
-    "color": ["#8BC34A", "#05f8d6", "#fdd845", "#22ed7c", "#09b0d3", "#1d27c9", "#f9e264", "#f47a75", "#72ccff", "#f0805a", "#26c0c0", "#d851cc", "#b91dd8", "#2418ea"],
+  "color": [
+    "#00b894",
+    "#fdcb6e",
+    "#ff7675",
+    "#6c5ce7",
+    "#00cec9",
+    "#ffeaa7",
+    "#fab1a0",
+    "#ffbe76",
+    "#74b9ff",
+    "#55efc4",
+    "#a29bfe",
+    "#d63031",
+    "#fd79a8",
+    "#00bfa5",
+    "#e17055"
+  ],
   "backgroundColor": "transparent",
   "textStyle": {
     "color": "#fff"