Explorar el Código

chore: 首页调整

cfofpp hace 6 meses
padre
commit
5b1987ff37

+ 12 - 3
src/views/home/components/box1/index.vue

@@ -53,7 +53,8 @@ export default {
           trigger: "item",
         },
         xAxis: {
-          type: "category",
+          // type: "category",
+          type: "value",
           data: this.chartOptions.xData,
           axisLine: {
             lineStyle: {
@@ -62,7 +63,15 @@ export default {
           },
         },
         yAxis: {
-          type: "value",
+          // type: "value",
+          type: "category",
+          data: [
+            "作业机构1",
+            "作业机构2",
+            "作业机构3",
+            "作业机构4",
+            "作业机构5",
+          ],
           axisLine: {
             lineStyle: {
               color: "#fff", // 设置 y 轴线的颜色为红色
@@ -73,7 +82,7 @@ export default {
           {
             data: this.chartOptions.data,
             type: "bar",
-            showBackground: true,
+            // showBackground: true,
             backgroundStyle: {
               color: "rgba(180, 180, 180, 0.2)",
             },

+ 25 - 10
src/views/home/components/map/index.vue

@@ -13,7 +13,7 @@
       <div class="item-container">
         <div class="item" v-for="(ite, i) in itemData" :key="i">
           <div class="val">121</div>
-          <div class="lab">数据</div>
+          <div class="lab">{{ ite.lable }}</div>
         </div>
       </div>
     </div>
@@ -43,7 +43,12 @@ export default {
     return {
       year: "2024",
       loading: true,
-      itemData: [{}, {}, {}, {}],
+      itemData: [
+        { lable: "日计划完成情况" },
+        { lable: "周计划完成情况" },
+        { lable: "月计划完成情况" },
+        { lable: "年计划完成情况" },
+      ],
       currentMap: "",
     };
   },
@@ -62,15 +67,20 @@ export default {
       var option = {
         tooltip: {
           trigger: "item",
+          // trigger: "axis",
+          alwaysShowContent: true,
           formatter: function (params) {
-            if (
-              params.name != "台湾" &&
-              params.name != "香港" &&
-              params.name != "澳门" &&
-              params.name.length > 0
-            ) {
-              return params.name + "<br/>数值:" + params.value;
-            }
+            return (
+              params.name +
+              "<br/>日计划完成情况" +
+              params.value +
+              "<br/>周计划完成情况" +
+              params.value +
+              "<br/>月计划完成情况" +
+              params.value +
+              "<br/>年计划完成情况" +
+              params.value
+            );
           },
         },
         visualMap: {
@@ -180,6 +190,11 @@ export default {
       window.addEventListener("resize", () => {
         myChart.resize();
       });
+      myChart.dispatchAction({
+        type: "showTip",
+        seriesIndex: 0,
+        dataIndex: 0,
+      });
       myChart.on("click", (params) => {
         this.currentMap = params.name;
         this.initCharts(mapEnum[params.name]);

+ 1 - 3
src/views/home/index.vue

@@ -61,9 +61,7 @@ export default {
   },
   methods: {
     init() {
-      this.chartOptions.data = [
-        120, 200, 150, 80, 70, 110, 130, 70, 110, 130, 200, 150,
-      ];
+      this.chartOptions.data = [120, 200, 150, 80, 70, 110];
       this.chartOptions.xData = Array(12)
         .fill(0)
         .map((it, i) => `${i + 1}月`);