feat:工作台页面优化

张含笑

2025-07-17 704b0dd87ef7b30f53cd434c2225fa245671d82c

 src/views/wel/components/flyratio.vue

@@ -5,7 +5,7 @@
       
        <div class="cardtotal">
          <p>机巢工单数量排名</p>
           <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
           <img @click="refresh" src="/src/assets/images/workbench/st1.svg" alt="" />
        </div>
         <div class="time-card">
        <div
@@ -130,21 +130,22 @@
    },
    grid: {
      left: '3%',
      right: '4%',
      right: '3%',
      bottom: '3%',
         top: '-3%', // 添加顶部间距
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      splitLine: { lineStyle: { color: '#E5E5E5' } },
      axisLabel: { color: '#7C8091',fontSize:'1.2rem' },
      splitLine: { lineStyle: { color: '#E5E5E5' },show:false },
      axisLabel: { color: '#7C8091',fontSize:'1.2rem',show:false },
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: 'category',
      data: optionData.yAxisData,
      axisLabel: { color: '#7C8091' ,fontSize:'1.2rem'},
      axisLine: { lineStyle: { color: '#D1D1D1' } },
      axisLabel: { color: '#7C8091' ,fontSize:'1.2rem',},
      axisLine: { lineStyle: { color: '#D1D1D1' } ,show:false},
      axisTick: { show: false },
      // 确保排序后的数据从上到下显示（最大值在顶部）
      inverse: true,
@@ -155,6 +156,7 @@
        type: 'bar',
        data: optionData.seriesData,
        itemStyle: {
        barBorderRadius: [0, 20, 20, 0],
          color: params => {
            // 前6项使用固定颜色循环，之后使用渐变
            return params.dataIndex < colors.length
@@ -170,6 +172,11 @@
          show: true,
          position: 'right',
          formatter: '{c}',
          itemStyle:{
             fontSize: '1.4rem',
             color: '#414243',
             
          }
        },
      },
    ],
@@ -210,7 +217,7 @@
    .cardtotal {
      display: flex;
      align-items: center;
      margin-left: 9px;
   
      img {
        width: 17px;
        height: 17px;