暂存

src/views/pms/stat/rdkb/workload.vue

@@ -25,6 +25,7 @@ const fieldConfig = [
 ]
 
 const colorPalette = ['#5470c6', '#f1d209', '#e14f0f', '#91cc75']
+
 const hexToRgba = (hex: string, opacity: number) => {
   let c: any
   if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
@@ -104,8 +105,8 @@ const renderChart = (data: any[]) => {
 
   const xAxisData = data.map((item) => (isYear ? item.reportDate : item.projectDeptName))
 
-  const series = fieldConfig.map((field, index) => {
-    const color = colorPalette[index % colorPalette.length]
+  const series = fieldConfig.map<any>((field, index) => {
+    const color = colorPalette[index]
 
     // 数据清洗，防止 null/undefined 报错
     const seriesData = data.map((item) => {
@@ -113,126 +114,75 @@ const renderChart = (data: any[]) => {
       return val === null || val === undefined || isNaN(val) ? 0 : val
     })
 
+    console.log('seriesData :>> ', seriesData)
+
+    return {
+      name: field.name,
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 8,
+      itemStyle: { color },
+      data: seriesData
+    }
+
     if (isYear) {
-      return {
-        name: field.name,
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 6,
-        showSymbol: false,
-        itemStyle: {
-          color: color
-        },
-        lineStyle: {
-          width: 2
-        },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: hexToRgba(color, 0.4) }, // 顶部半透明
-            { offset: 1, color: hexToRgba(color, 0.05) } // 底部几近透明
-          ])
-        },
-        data: seriesData
-      }
     } else {
-      // --- 柱状图模式 (增加立体感) ---
-      return {
-        name: field.name,
-        type: 'bar',
-        barMaxWidth: 16, // 柱子不要太宽
-        itemStyle: {
-          borderRadius: [4, 4, 0, 0], // 顶部圆角
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: color }, // 顶部纯色
-            { offset: 1, color: hexToRgba(color, 0.4) } // 底部半透明
-          ])
-        },
-        data: seriesData
-      }
     }
   })
 
-  const option = {
-    // 提示框样式优化
+  let option: echarts.EChartsOption
+
+  option = {
     tooltip: {
       trigger: 'axis',
-      backgroundColor: 'rgba(50,50,50,0.8)', // 深灰色背景
-      borderColor: '#457794', // 边框呼应网格颜色
-      textStyle: {
-        color: '#fff'
-      },
       axisPointer: {
         type: 'cross',
         label: {
-          backgroundColor: '#6a7985'
-        },
-        lineStyle: {
-          color: '#B6C8DA',
-          type: 'dashed'
+          backgroundColor: '#283b56'
         }
       }
     },
-    legend: {
-      data: fieldConfig.map((f) => f.name),
-      top: 0, // 紧贴顶部
-      icon: isYear ? 'circle' : 'roundRect', // 图例图标随图表类型变化
-      textStyle: {
-        color: '#B6C8DA'
-      }
-    },
     grid: {
+      top: '5%',
       left: '2%',
-      right: '3%',
-      bottom: '3%',
-      top: '12%', // 留出一点空间给图例
+      right: '5%',
+      bottom: '0%',
       containLabel: true
     },
     xAxis: {
       type: 'category',
-      // 折线图 false (贴边)，柱状图 true (留白)
-      boundaryGap: !isYear,
+      boundaryGap: false,
       data: xAxisData,
       axisLabel: {
-        color: '#B6C8DA',
-        formatter: (val: string) => {
-          // 如果名字太长，可以截断或者换行，这里简单处理
-          return val.length > 6 ? val.slice(0, 6) + '...' : val
-        }
+        color: '#B6C8DA'
       },
       axisLine: {
         lineStyle: {
-          color: '#B6C8DA'
+          color: '#B6C8DA' // X轴线白色半透明
         }
-      },
-      axisTick: {
-        show: false // 隐藏刻度线，更简洁
       }
     },
-    // 单 Y 轴配置
     yAxis: {
       type: 'value',
+      scale: true,
       axisLabel: {
-        color: '#B6C8DA',
-        formatter: '{value}'
+        color: '#B6C8DA'
       },
-      // 复刻原图的虚线网格
       splitLine: {
         show: true,
         lineStyle: {
-          color: '#457794', // 蓝灰色
-          type: 'dashed', // 虚线
-          opacity: 0.5 // 半透明
+          color: '#457794',
+          type: 'dashed'
         }
       },
       axisLine: {
-        show: true, // 显示轴线
         lineStyle: {
           color: '#B6C8DA'
         }
       }
     },
-    series: series
+    series
   }
 
   myChart.value.setOption(option, true)