update 调整样式·

src/components/body-d-left/bodyLeftHooks.ts

@@ -152,25 +152,61 @@ export function useHospitalList() {
     };
 }
 
+const radarChartsTheme = {
+    dark: {
+        radarName: {
+            textStyle: {
+                color: '#fff',
+            },
+        },
+        splitLine: {
+            color: '#597589',
+        },
+        axisName: {
+            color: '#ffffff',
+        },
+        areaStyle: {
+            color: '#05D5FF',
+        },
+        lineStyle: {
+            color: '#05D5FF',
+        },
+        itemStyle: {
+            color: '#05D5FF',
+        },
+    },
+    light: {
+        radarName: {
+            textStyle: {
+                color: '#607DDB',
+            },
+        },
+        splitLine: {
+            color: '#b5c2ef',
+        },
+        axisName: {
+            color: '#607DDB',
+        },
+        areaStyle: {
+            color: '#a0b6fd',
+        },
+        lineStyle: {
+            color: '#607DDB',
+        },
+        itemStyle: {
+            color: '#607DDB',
+        },
+    },
+};
 /**
  * @Description:体检医院雷达图
  * @date 2023/6/27
  * @param indicator:名称及最大值
  * @param countList:数据项
  */
-export const radarCharts = ({ indicator, countList }) => {
+export const radarCharts = ({ indicator, countList, theme }) => {
+    const { radarName, splitLine, axisName, areaStyle, lineStyle, itemStyle } = radarChartsTheme[theme] || radarChartsTheme.dark;
     return {
-        // tooltip: {
-        //     backgroundColor: 'rgba(50,50,50,0.7)',
-        //     borderColor: 'rgba(50,50,50,0.7)',
-        //     textStyle: {
-        //         color: '#fff',
-        //     },
-        //     //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
-        //     confine: true,
-        //     enterable: true, //鼠标是否可以移动到tooltip区域内
-        //     valueFormatter: (params) => {},
-        // },
         grid: {
             top: '1%',
             left: '5%',
@@ -184,6 +220,7 @@ export const radarCharts = ({ indicator, countList }) => {
                     color: '#fff',
                     fontSize: 14,
                 },
+                ...radarName,
             },
             shape: 'polygon',
             center: ['50%', '50%'],
@@ -201,6 +238,7 @@ export const radarCharts = ({ indicator, countList }) => {
                 lineStyle: {
                     width: 1,
                     color: '#597589', // 设置网格的颜色
+                    ...splitLine,
                 },
             },
             indicator: indicator,
@@ -213,6 +251,7 @@ export const radarCharts = ({ indicator, countList }) => {
                     return `${params}\n${countList[dataIndex]}`;
                 },
                 color: '#ffffff',
+                ...axisName,
             },
         },
         polar: {
@@ -252,17 +291,20 @@ export const radarCharts = ({ indicator, countList }) => {
                 itemStyle: {
                     normal: {
                         color: '#05D5FF',
+                        ...itemStyle,
                     },
                 },
                 areaStyle: {
                     normal: {
                         color: '#05D5FF',
                         opacity: 0.5,
+                        ...areaStyle,
                     },
                 },
                 lineStyle: {
                     width: 2,
                     color: '#05D5FF',
+                    ...lineStyle,
                 },
                 label: {
                     normal: {
@@ -278,8 +320,44 @@ export const radarCharts = ({ indicator, countList }) => {
         ],
     };
 };
+const barTheme = {
+    dark: {
+        tooltip: {
+            textStyle: {
+                color: '#fff',
+            },
+            backgroundColor: 'rgba(50,50,50,0.7)',
+            borderColor: '#1b7ef2',
+        },
+        xAxisLabel: {
+            color: '#FFFFFF',
+        },
+        itemStyle: [
+            { offset: 0, color: '#008CFF' },
+            { offset: 1, color: '#33CBFE' },
+        ],
+    },
+    light: {
+        tooltip: {
+            textStyle: {
+                color: '#768ddb',
+            },
+            backgroundColor: '#d5dcf8',
+            borderColor: '#1b7ef2',
+        },
+        xAxisLabel: {
+            color: '#607DDB',
+        },
+        itemStyle: [
+            { offset: 0, color: '#607DDB' },
+            { offset: 1, color: '#768ddb' },
+        ],
+    },
+};
+
+export function barOption(xData, ydata, theme) {
+    const { tooltip, xAxisLabel, itemStyle } = barTheme[theme] || barTheme.dark;
 
-export function barOption(xData, ydata) {
     function maxCount() {
         if (ydata.length) {
             return Math.max(...ydata) < 5 ? 5 : null;
@@ -302,6 +380,7 @@ export function barOption(xData, ydata) {
             },
             backgroundColor: 'rgba(50,50,50,0.7)',
             borderColor: '#1b7ef2',
+            ...tooltip,
         },
         xAxis: {
             type: 'category',
@@ -309,6 +388,7 @@ export function barOption(xData, ydata) {
             axisLabel: {
                 color: '#FFFFFF',
                 fontSize: 14,
+                ...xAxisLabel,
             },
             axisLine: {
                 color: '#bac9e1',
@@ -319,11 +399,13 @@ export function barOption(xData, ydata) {
             nameTextStyle: {
                 color: '#fff',
                 padding: [0, 0, 0, -15],
+                ...xAxisLabel,
             },
             type: 'value',
             axisLabel: {
                 color: '#FFFFFF',
                 fontSize: 14,
+                ...xAxisLabel,
             },
             splitLine: {
                 show: true,
@@ -341,10 +423,7 @@ export function barOption(xData, ydata) {
                 type: 'bar',
                 barWidth: '20%',
                 itemStyle: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        { offset: 0, color: '#008CFF' },
-                        { offset: 1, color: '#33CBFE' },
-                    ]),
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, itemStyle),
                 },
                 barMaxWidth: '10',
                 label: {
@@ -352,6 +431,7 @@ export function barOption(xData, ydata) {
                     position: 'top',
                     color: '#33CBFE',
                     fontWeight: 'normal',
+                    ...xAxisLabel,
                 },
             },
         ],