chore: 首页-风险辨识改为柱状图

src/views/home/components/RiskIdentification/index.vue

@@ -59,7 +59,7 @@ export default {
       this.loading = false;
       data = (data || []).map((ite) => ({
         name: ite.riskName,
-        value: ite.riskNum,
+        value: ite.riskNum ?? 0,
       }));
       let myChart = echarts.getInstanceByDom(
         document.getElementById("barChart2")
@@ -67,7 +67,6 @@ export default {
       if (myChart == null) {
         myChart = echarts.init(document.getElementById("barChart2"));
       }
-
       // 指定图表的配置项和数据
       var option = {
         title: {
@@ -83,7 +82,11 @@ export default {
         tooltip: {
           trigger: "item",
         },
-        color: ["#0052F1", "#00a4ff"],
+        // color: ["#0052F1", "#00a4ff"],
+        color: ["#00a4ff", "#0052F1"],
+        textStyle: {
+          color: "#fff",
+        },
         legend: {
           top: "5%",
           left: "center",
@@ -95,43 +98,82 @@ export default {
           left: "2%", //图表距离容器左侧多少距离
           right: "2%", //图表距离容器右侧侧多少距离
           bottom: "0%", //图表距离容器上面多少距离
-          top: "2%", //图表距离容器下面多少距离
+          top: "10%", //图表距离容器下面多少距离
           containLabel: true,
         },
+        xAxis: {
+          type: "category",
+          data: data.map((ite) => ite.name),
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: ["#02367c"], // 设置 Y 轴分割线颜色为深灰色
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ["#02367c"], // 设置 Y 轴分割线颜色为深灰色
+            },
+          },
+        },
         series: [
           {
-            type: "pie",
-            center: ["50%", "60%"],
-            radius: ["40%", "70%"],
-            avoidLabelOverlap: false,
+            data: data.map((ite, i) => {
+              return {
+                value: ite.value,
+                itemStyle: {
+                  color: ["#00a4ff", "#0052F1"][i],
+                },
+              };
+            }),
+            type: "bar",
+            barMinHeight: 10,
             label: {
               show: true,
-              formatter: "{b|{b}} \n {d|{c}条}",
-              rich: {
-                d: {
-                  color: "#fff",
-                  fontSize: 16,
-                  lineHeight: 24,
-                  height: 24,
-                },
-                b: {
-                  color: "#D3EBFF",
-                  fontSize: 14,
-                  lineHeight: 20,
-                  align: "left",
-                },
-              },
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
+              position: "top",
+              fontSize: 14,
+              color: "#fff",
             },
-            data: data || [],
           },
         ],
+        // series: [
+        //   {
+        //     type: "pie",
+        //     center: ["50%", "60%"],
+        //     radius: ["40%", "70%"],
+        //     avoidLabelOverlap: false,
+        //     label: {
+        //       show: true,
+        //       formatter: "{b|{b}} \n {d|{c}条}",
+        //       rich: {
+        //         d: {
+        //           color: "#fff",
+        //           fontSize: 16,
+        //           lineHeight: 24,
+        //           height: 24,
+        //         },
+        //         b: {
+        //           color: "#D3EBFF",
+        //           fontSize: 14,
+        //           lineHeight: 20,
+        //           align: "left",
+        //         },
+        //       },
+        //     },
+        //     emphasis: {
+        //       itemStyle: {
+        //         shadowBlur: 10,
+        //         shadowOffsetX: 0,
+        //         shadowColor: "rgba(0, 0, 0, 0.5)",
+        //       },
+        //     },
+        //     data: data || [],
+        //   },
+        // ],
       };
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);