feat:工作台饼图label

张含笑

2025-06-03 a3f948bd041b7cebf3e3242dcce910ed0fb1299c

feat:工作台饼图label

 src/views/wel/index.vue

@@ -36,8 +36,6 @@
                      <img :src="overviewImg1" alt="" />
                      <div class="cardtotal">
                        <p>工单统计占比</p>
                        <!-- <div class="total-number">{{ eventTotal }}</div>
                        <span>个</span> -->
                      </div>
                    </div>

@@ -45,9 +43,6 @@
                      <div class="status-item" v-for="(item, index) in eventTypeList" :key="index">
                        <div class="statusCon">
                          <div class="status-label">{{ item.name }}</div>
                          <!-- <div :style="{ color: item.color }" class="status-value">
                            {{ item.value }}<span>个</span>
                          </div> -->
                          <div class="status-value">{{ item.value }}<span>个</span></div>
                          <div class="ratio">
                            占比
@@ -226,7 +221,8 @@
      rate: item.rate,
    })),
  };

  const containerWidth = chart.value.clientWidth
  const isSmallScreen = containerWidth < 768 // 移动端判断
  const echartsOption = {
    color: ['#FF472F', '#FF7411', '#FFC300', '#0291A1'],
    tooltip: {
@@ -242,7 +238,7 @@
          border-radius: 0.4rem;
          font-size: 1.2rem;" class="tooltip-area">
          <p>${params.marker}${params.name}</p>
          <h4 style="margin-left: 3rem;">${params.data.rate || params.percent}%</h4>
          <h4 style="margin-left: 1rem;">${params.data.rate || params.percent}%</h4>
        </div>`;
      },
    },
@@ -280,22 +276,24 @@
          },
          alignTo: 'labelLine',
          overflow: 'truncate',
           overflow: 'none', // 禁用省略号
          bleedMargin: 30, // 防止标签被截断
          rich: {
            a: {
              color: 'rgba(28, 31, 35, 0.80)',
              fontSize: '1.2rem', 
              fontSize: isSmallScreen ? '1rem' : '1.2rem', 
            },
            b: {
              color: '#1C1F23',
              fontSize: '1.4rem',
              fontWeight: 'bold', // 确保加粗
              color: '#1C1F23',    
               fontSize: isSmallScreen ? '1rem' : '1.3rem',
              fontWeight: 'bold',
            },
          },
        },
        labelLine: {
          show: true,
          length: 5, // 调整引导线长度
          length2: 15,
          length: 3, // 调整引导线长度
          length2: 5,
          lineStyle: {
            cap: 'round',
          },
@@ -366,6 +364,7 @@
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
       fontSize:'1.2rem'
    },
    xAxis: {
      type: 'category',
@@ -386,6 +385,7 @@
        name: '单位:万套',
        nameTextStyle: {
          color: '#383838',
          fontSize:'1.2rem'
        },
        min: 1,
        logBase: 3,