Merge branch 'master' into jiangwu

shuishen

2025-05-19 2dfc8dc4bcd3d3cd4aed1b6054e073e140eba9c8

 src/views/wel/components/flyratio.vue

@@ -5,24 +5,12 @@
        <img :src="jc1" alt="" />
        <div class="cardtotal">
          <p>机巢工单数量排名</p>
          <!-- <div class="total-number">111</div>
          <span>个</span> -->
        </div>
      </div>
      <!-- <div class="status-grid">
        <div v-for="(item, index) in jcOrder" :key="index" class="status-item">
          <img :src="jc2" alt="" />
          <div>
            <div class="status-label">{{ item.name }}</div>
            <div :style="{ color: '#387FC8' }" class="status-value">
              {{ item.value }}
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <div class="nestCenter">
      <div class="chart" ref="echartsRef"></div>
      <div class="chart" ref="echartsRef" ></div>
   
    </div>
  </div>
</template>
@@ -61,27 +49,20 @@
  { immediate: true }
);
const pieInit = resList => {
  // 1. 过滤无效数据并排序
  const validData = resList
    .filter(item => item.name)
    .sort((a, b) => b.value - a.value); // 从大到小排序

  const validData = resList.filter(item => item.name).sort((a, b) => b.value - a.value); // 从大到小排序
  const colors = [
    '#F87E04',  // 橙色
    '#FFC400',  // 黄色
    '#08BC44',  // 绿色
    '#07B5FF',  // 蓝色
    '#A98DFF',  // 紫色
    '#9ABFFF'   // 浅蓝
    '#F87E04', // 橙色
    '#FFC400', // 黄色
    '#08BC44', // 绿色
    '#07B5FF', // 蓝色
    '#A98DFF', // 紫色
    '#9ABFFF', // 浅蓝
  ];

  // 2. 准备图表数据
  const optionData = {
    yAxisData: validData.map(item => item.name),
    seriesData: validData.map(item => item.value),
  };

  // 3. ECharts配置项
  const option = {
    tooltip: {
      trigger: 'axis',
@@ -97,52 +78,59 @@
    xAxis: {
      type: 'value',
      splitLine: { lineStyle: { color: '#E5E5E5' } },
      axisLabel: { color: '#35455aa6' },
      axisLabel: { color: '#7C8091' },
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: 'category',
      data: optionData.yAxisData,
      axisLabel: { color: '#35455aa6' },
      axisLabel: { color: '#7C8091' },
      axisLine: { lineStyle: { color: '#D1D1D1' } },
      axisTick: { show: false },
      // 4. 确保排序后的数据从上到下显示（最大值在顶部）
      inverse: true
      inverse: true,
    },
    series: [{
      type: 'bar',
      data: optionData.seriesData,
      itemStyle: {
        color: (params) => {
          // 前6项使用固定颜色循环，之后使用渐变
          return params.dataIndex < colors.length 
            ? colors[params.dataIndex] 
            : new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#93BAFF' },
                { offset: 1, color: '#C5DEFF' }
              ]);
        }
    series: [
      {
        type: 'bar',
        data: optionData.seriesData,
        itemStyle: {
          color: params => {
            // 前6项使用固定颜色循环，之后使用渐变
            return params.dataIndex < colors.length
              ? colors[params.dataIndex]
              : new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#93BAFF' },
                  { offset: 1, color: '#C5DEFF' },
                ]);
          },
        },
        barWidth: '30%',
        label: {
          show: true,
          position: 'right',
          formatter: '{c}',
        },
      },
      barWidth: '30%',
      label: {
        show: true,
        position: 'right',
        formatter: '{c}',
      },
    }]
    ],
  };

  // 5. 设置图表选项
  jcchart.value.setOption(option, true); // true表示不合并选项
  jcchart.value.setOption(option, true);
};
onMounted(() => {
  getIndustryJobNumPieChart();
  
});
</script>

<style scoped lang="scss">
.machineNest {
width: 100%;
  width: 100%;
    .custom-text {
  font-size: 14px;
color: #7C8091;
  }
  .nestTop {
    .card-title {
      display: flex;
@@ -169,7 +157,7 @@
        color: #7c8091;
      }
      .total-number {
        font-family: 'YouSheBiaoTiHei';
        font-family: 'Source Han Sans CN';
        font-weight: bold;
        font-size: 32px;
        color: #2a54ff;
@@ -198,7 +186,7 @@
          color: #383838;
        }
        .status-value {
          font-family: 'YouSheBiaoTiHei';
           font-family: 'Source Han Sans CN';
          font-weight: bold;
          font-size: 20px;
        }