fix(优化仪表盘): 🧩 优化仪表盘的图表暗黑模式下切换

coder-czy · Dec 8, 2023 · 7fa8c15 · 7fa8c15
1 parent 6962184
commit 7fa8c15
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 16 deletions.
diff --git a/src/hooks/useEcharts.tsx b/src/hooks/useEcharts.tsx
@@ -4,6 +4,7 @@ import { ECharts } from "echarts";
 import { ECOption } from "@/utils/echarts";
 import Echarts from "@/utils/echarts";
 import { debounce } from "@/utils/common";
+import { useSelector } from "@/store";
 
 /**
  * @description 创建和初始化Echarts
@@ -14,10 +15,21 @@ import { debounce } from "@/utils/common";
 
 export const useEcharts = (echartsRef: RefObject<HTMLDivElement>, option: ECOption) => {
 	const myChart = useRef<ECharts | null>(null);
+	const { isDark } = useSelector(state => state.global);
+	let mode = isDark ? "dark" : "light";
+	// 切换暗黑模式重新渲染
+	useEffect(() => {
+		if (myChart.current) {
+			myChart.current.dispose();
+			myChart.current = Echarts.init(echartsRef.current, mode) as any;
+			option && myChart.current?.setOption(option);
+		}
+	}, [isDark]);
+
 	useEffect(() => {
 		if (echartsRef.current && myChart && !myChart.current) {
 			// 初始化
-			myChart.current = Echarts.init(echartsRef.current) as any;
+			myChart.current = Echarts.init(echartsRef.current, mode) as any;
 			option && myChart.current?.setOption(option);
 		}
 		if (myChart.current) {

diff --git a/src/views/dashboard/components/gaugeChart.tsx b/src/views/dashboard/components/gaugeChart.tsx
@@ -68,7 +68,7 @@ function GaugeChart() {
 		}
 	};
 	const option: ECOption = {
-		// backgroundColor: "#0E1327",
+		backgroundColor: "transparent",
 		tooltip: {
 			formatter: "{a} <br/>{b} : {c}%"
 		},

diff --git a/src/views/dashboard/components/pieChart.tsx b/src/views/dashboard/components/pieChart.tsx
@@ -60,15 +60,15 @@ function PieChart() {
 		);
 	}
 	const option: ECOption = {
-		// backgroundColor: "#0A2E5D",
+		backgroundColor: "transparent",
 		color: color,
 		title: {
 			text: "运输方式",
 			top: "48%",
 			textAlign: "center",
 			left: "49%",
 			textStyle: {
-				color: "#323233",
+				// color: "#323233",
 				fontSize: 22,
 				fontWeight: "lighter"
 			}
@@ -102,7 +102,7 @@ function PieChart() {
 			data: ["火车", "飞机", "客车", "轮渡"],
 			bottom: "10%",
 			textStyle: {
-				color: "#323233"
+				// color: "#323233"
 			},
 			itemGap: 20
 		},
@@ -119,7 +119,7 @@ function PieChart() {
 				label: {
 					show: true,
 					position: "outside",
-					color: "#323233",
+					// color: "#323233",
 					formatter: function (params: LabelFormatterCallback) {
 						let percent = "0";
 						let total = 0;
@@ -137,8 +137,8 @@ function PieChart() {
 				labelLine: {
 					// length: 30,
 					// length2: 100,
-					show: true,
-					color: "#323233"
+					show: true
+					// color: "#323233"
 				},
 				data: data
 			}

diff --git a/src/views/dashboard/components/productChart.tsx b/src/views/dashboard/components/productChart.tsx
@@ -21,13 +21,13 @@ function ProductChart() {
 	let xData = mockData.map(item => item.time);
 	let yData = mockData.map(item => item.num);
 	const option: ECOption = {
-		// backgroundColor: "rgba(0,0,0,.5)",
+		backgroundColor: "transparent",
 		title: {
 			text: "商品销售",
 			top: "5%",
 			left: "5%",
 			textStyle: {
-				color: "#323233",
+				// color: "#323233",
 				fontSize: 18,
 				fontWeight: "normal"
 			}
@@ -56,18 +56,19 @@ function ProductChart() {
 			boundaryGap: false, // 两边留白
 			// axisLabel: { textStyle: { color: '#fff', fontSize:14}},
 			data: xData,
-			axisLine: { lineStyle: { color: "#000", width: 1 } },
-			splitLine: { lineStyle: { type: "dashed", color: "rgba(255,255,255,.2)", width: 1 }, show: true }
+			axisTick: { show: false }
+			// splitLine: { show: false }
 		},
 		yAxis: {
-			name: "商品数量",
+			// name: "商品数量",
 			type: "value",
 			scale: true,
-			nameTextStyle: { color: "rgba(255,255,255,.5)", align: "right", padding: [0, 10, 0, 0], fontSize: "100%" },
+			// nameTextStyle: { color: "rgba(255,255,255,.5)", align: "right", padding: [0, 10, 0, 0], fontSize: "100%" },
 			// axisLabel: { textStyle: { color: '#fff', fontSize: '100%' }, margin: 8 },
-			axisLine: { lineStyle: { color: "#000", width: 1 } },
-			splitLine: { lineStyle: { type: "solid", color: "rgba(255,255,255,.2)", width: 1 }, show: true }
+			// axisLine: { lineStyle: { color: "#000", width: 1 } },
+			splitLine: { show: true }
 		},
+
 		series: {
 			name: "",
 			type: "line",