🐛首页图表展示方式

src/pages/Home/index.tsx

@@ -90,6 +90,17 @@ export default function Home() {
   // -----------图表
   const echartsFu = useCallback(async () => {
     const res = await getStores2API1();
+    let list = res.data;
+
+    if (list && list.length && list.length > 7) {
+      list = list.slice(0, 7);
+    } else {
+      const num = 7 - list.length;
+      for (let i = 0; i < num; i++) {
+        if (i % 2 !== 0) list.unshift({ groupKey: "", count: null });
+        else list.push({ groupKey: "", count: null });
+      }
+    }
     const chartDom: any = document.querySelector(".chart");
     const myChart = echarts.init(chartDom);
     const option = {
@@ -109,14 +120,16 @@ export default function Home() {
       xAxis: [
         {
           type: "category",
-          data: res.data.map((v: any) => v.groupKey),
+          data: list.map((v: any) => v.groupKey),
           axisTick: {
             show: false,
             alignWithLabel: false,
           },
           axisLabel: {
+            interval: 0, //强制文字产生间隔
             textStyle: {
               color: "#000", //坐标值得具体的颜色
+              fontSize: 12,
             },
           },
           axisLine: {
@@ -156,8 +169,8 @@ export default function Home() {
         {
           name: "",
           type: "bar",
-          barWidth: "20%",
-          data: res.data.map((v: any) => v.count),
+          barMaxwidth: "50%",
+          data: list.map((v: any) => v.count),
           itemStyle: {
             normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [