柱形图优化

src/views/component/DataWarehouse.vue

@@ -2,29 +2,17 @@
   <div class="data-warehouse">
     <!-- 主标题区域 - 单独放左边 -->
     <div class="main-title-section">
-      <img src="@/assets/33.png" alt="" class="title-image" />
+      <img src="@/assets/33.png" alt="数据仓库图标" class="title-image" />
       <span>数据仓库</span>
     </div>
 
     <!-- 内容区域 - 放右边，与标题区域左右布局 -->
     <div class="warehouse-container">
       <div class="warehouse-layers">
-        <!-- DWD(数据明细层) - 左侧 -->
+        <!-- DWD(数据明细层) - 左侧，使用ECharts圆柱柱状图 -->
         <div class="layer-item dwd-layer">
           <div class="layer-title">DWD(数据明细层)</div>
-          <div class="layer-stats">
+          <div class="layer-chart" ref="dwdChartRef"></div>
-            <div class="stat-item">
-              <span class="stat-label">数据子集数量</span>
-              <div class="subset-list">
-                <!-- 使用滚动排名组件 -->
-                <scroll-ranking
-                  :list="top20Apis"
-                  :visible-count="4"
-                  :interval="2000"
-                />
-              </div>
-            </div>
-          </div>
         </div>
 
         <!-- 分隔线 -->
@@ -58,37 +46,272 @@
 </template>
 
 <script>
-import ScrollRanking from "@/components/ScrollRanking.vue";
+import { ref, onMounted, onUnmounted } from "vue";
+import * as echarts from "echarts";
+
 export default {
-  components: {
+  setup() {
-    ScrollRanking,
+    const dwdChartRef = ref(null);
+    let dwdChart = null;
+
+    // 数据源数据 - 分离缩写和完整名称
+    const top20Apis = [
+      { abbr: "GXXX", name: "学校概况数据子集", count: 209 },
+      { abbr: "GXXS", name: "学生管理数据子集", count: 193 },
+      { abbr: "GXJX", name: "教学管理数据子集", count: 127 },
+      { abbr: "GXJG", name: "教职工管理数据子集", count: 231 },
+      { abbr: "GXKY", name: "科研管理数据子集", count: 189 },
+      { abbr: "GXCW", name: "财务管理数据子集", count: 176 },
+      { abbr: "GXZC", name: "资产与设备管理数据子集", count: 156 },
+      { abbr: "GXBG", name: "办公管理数据子集", count: 143 },
+      { abbr: "GXWS", name: "外事(港澳台事务)管理数据子集", count: 132 },
+      { abbr: "GXDA", name: "档案管理数据子集", count: 121 },
+      { abbr: "GXGZ", name: "高职院校专用数据子集", count: 110 },
+    ];
+
+    // 初始化图表
+    const initChart = () => {
+      if (dwdChart) {
+        dwdChart.dispose();
+      }
+
+      // 创建图表实例
+      dwdChart = echarts.init(dwdChartRef.value);
+
+      // 从数据源提取x轴(缩写)和y轴数据
+      const xData = top20Apis.map((item) => item.abbr);
+      const yData = top20Apis.map((item) => item.count);
+
+      // 配置项 - 修复悬停提示显示问题
+      const option = {
+        // backgroundColor: "#061326",
+        grid: {
+          top: "15%",
+          left: "-5%",
+          bottom: "10%",
+          right: "5%",
+          containLabel: true,
+        },
+        tooltip: {
+          show: true,
+          backgroundColor: "rgba(10, 30, 60, 0.9)",
+          borderColor: "rgba(74, 144, 226, 0.5)",
+          borderWidth: 1,
+          textStyle: {
+            color: "rgba(255, 255, 255, 0.8)",
+            fontSize: 13,
+          },
+          formatter: function (params) {
+            // 根据您提供的打印信息，params是单个对象而不是数组
+            // 增加调试信息，帮助确认参数结构
+            console.log("Tooltip params:", params);
+
+            // 检查参数是否有效
+            if (
+              !params ||
+              params.dataIndex === undefined ||
+              params.dataIndex === null
+            ) {
+              return `<div>数据信息获取失败</div>`;
+            }
+
+            // 使用dataIndex获取对应数据
+            const index = params.dataIndex;
+            const item = top20Apis[index];
+
+            // 检查数据是否存在
+            if (!item) {
+              return `<div>数据信息未找到 (索引: ${index})</div>`;
+            }
+
+            // 显示完整信息
+            return `<div><strong>${item.abbr} ${item.name}</strong></div>
+                      <div>数据量: ${item.count} 条</div>`;
+          },
+          padding: 10,
+          hideDelay: 500,
+        },
+        animation: false,
+        xAxis: [
+          {
+            type: "category",
+            data: xData,
+            axisTick: {
+              alignWithLabel: true,
+            },
+            nameTextStyle: {
+              color: "#82b0ec",
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: "#82b0ec",
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: "#fff",
+                fontSize: 13,
+                fontWeight: "bold",
+              },
+              margin: 15,
+              rotate: 0,
+            },
           },
-  data() {
-    return {
-      top20Apis: [
-        { name: "GXXX 学校概况数据子集", count: 209 },
-        { name: "GXXS 学生管理数据子集", count: 193 },
-        { name: "GXJX 教学管理数据子集", count: 127 },
-        { name: "GXJG 教职工管理数据子集", count: 231 },
-        { name: "GXKY 科研管理数据子集", count: 189 },
-        { name: "GXCW 财务管理数据子集", count: 176 },
-        { name: "GXZC 资产与设备管理数据子集", count: 156 },
-        { name: "GXBG 办公管理数据子集", count: 143 },
-        { name: "GXWS 外事(港澳台事务)管理数据子集", count: 132 },
-        { name: "GXDA 档案管理数据子集", count: 121 },
-        { name: "GXGZ 高职院校专用数据子集", count: 110 },
         ],
+        yAxis: [
+          {
+            show: false,
+            type: "value",
+            axisLabel: {
+              textStyle: {
+                color: "#fff",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#0c2c5a",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "pictorialBar",
+            symbolSize: [40, 10],
+            symbolOffset: [0, -6],
+            symbolPosition: "end",
+            z: 12,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                fontSize: 15,
+                fontWeight: "bold",
+                color: "#34DCFF",
+              },
+            },
+            color: "#2DB1EF",
+            data: yData,
+          },
+          {
+            name: "",
+            type: "pictorialBar",
+            symbolSize: [40, 10],
+            symbolOffset: [0, 7],
+            z: 12,
+            color: "#2DB1EF",
+            data: yData,
+          },
+          {
+            name: "",
+            type: "pictorialBar",
+            symbolSize: function (d) {
+              return d > 0 ? [50, 15] : [0, 0];
+            },
+            symbolOffset: [0, 12],
+            z: 10,
+            itemStyle: {
+              normal: {
+                color: "transparent",
+                borderColor: "#2EA9E5",
+                borderType: "solid",
+                borderWidth: 1,
+              },
+            },
+            data: yData,
+          },
+          {
+            name: "",
+            type: "pictorialBar",
+            symbolSize: [70, 20],
+            symbolOffset: [0, 18],
+            z: 10,
+            itemStyle: {
+              normal: {
+                color: "transparent",
+                borderColor: "#19465D",
+                borderType: "solid",
+                borderWidth: 2,
+              },
+            },
+            data: yData,
+          },
+          {
+            type: "bar",
+            barWidth: "40",
+            barGap: "10%",
+            barCateGoryGap: "10%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                  {
+                    offset: 0,
+                    color: "#38B2E6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#0B3147",
+                  },
+                ]),
+                opacity: 0.8,
+              },
+            },
+            data: yData,
+          },
+        ],
+      };
+
+      // 设置配置项
+      dwdChart.setOption(option);
+    };
+
+    // 挂载时初始化图表
+    onMounted(() => {
+      if (dwdChartRef.value) {
+        dwdChartRef.value.style.height = "calc(100% - 20px)";
+        initChart();
+
+        const handleResize = () => {
+          if (dwdChart) {
+            dwdChart.resize();
+          }
+        };
+
+        window.addEventListener("resize", handleResize);
+
+        onUnmounted(() => {
+          window.removeEventListener("resize", handleResize);
+        });
+      }
+    });
+
+    // 组件卸载时销毁图表
+    onUnmounted(() => {
+      if (dwdChart) {
+        dwdChart.dispose();
+        dwdChart = null;
+      }
+    });
+
+    return {
+      dwdChartRef,
     };
   },
 };
 </script>
 
 <style scoped lang="scss">
+/* 样式保持不变 */
 .data-warehouse {
   height: 100%;
   box-sizing: border-box;
   overflow: hidden;
-  display: flex; /* 主容器变为flex，让标题和内容区域左右布局 */
+  display: flex;
   gap: 20px;
   padding: 0;
   margin: 0;
@@ -107,9 +330,8 @@ export default {
   box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
 }
 
-// 主标题区域 - 单独放左边
 .main-title-section {
-  flex: 0 0 100px; // 固定宽度
+  flex: 0 0 100px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -130,11 +352,11 @@ export default {
   }
 }
 
-// 内容区域容器 - 放右边
 .warehouse-container {
-  flex: 1; // 占满剩余空间
+  flex: 1;
   height: 100%;
   box-sizing: border-box;
+  padding: 20px;
 }
 
 .warehouse-layers {
@@ -142,10 +364,9 @@ export default {
   gap: 15px;
   height: 100%;
   box-sizing: border-box;
-  align-items: stretch; // 确保所有子元素高度一致
+  align-items: stretch;
 }
 
-// 层之间的分隔线
 .layer-divider {
   width: 1px;
   background: linear-gradient(
@@ -155,7 +376,7 @@ export default {
     transparent
   );
   align-self: center;
-  height: 80%; // 分隔线高度为容器的80%，视觉上更和谐
+  height: 80%;
 }
 
 .layer-item {
@@ -174,6 +395,7 @@ export default {
     margin-bottom: 12px;
     text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
     padding-bottom: 6px;
+    border-bottom: 1px solid rgba(74, 144, 226, 0.2);
   }
 
   .layer-stats {
@@ -201,46 +423,20 @@ export default {
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
-
-      .subset-list {
-        margin-top: 6px;
-        padding-right: 6px;
-
-        &::-webkit-scrollbar {
-          width: 5px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          border-radius: 3px;
-        }
-
-        .subset-item {
-          font-size: 13px;
-          color: rgba(255, 255, 255, 0.9);
-          padding: 5px 0;
-          border-bottom: 1px dashed rgba(74, 144, 226, 0.2);
-
-          &:last-child {
-            border-bottom: none;
-          }
-
-          &:hover {
-            color: #4a90e2;
-            transform: translateX(3px);
-            transition: all 0.2s ease;
-          }
-        }
-      }
-    }
     }
   }
 
-// ODS层使用2x2网格布局
+  .layer-chart {
+    flex: 1;
+    width: 100%;
+    min-height: 400px;
+  }
+}
+
 .ods-layer .layer-stats {
   grid-template-columns: repeat(2, 1fr);
 }
 
-// 响应式调整
 @media (max-width: 1200px) {
   .data-warehouse {
     flex-direction: column;
@@ -260,7 +456,6 @@ export default {
     flex-direction: column;
   }
 
-  // 在小屏幕上，分隔线改为水平方向
   .layer-divider {
     width: 80%;
     height: 1px;
@@ -272,5 +467,10 @@ export default {
       transparent
     );
   }
+
+  .layer-chart {
+    min-height: 300px;
+  }
 }
 </style>
+