个人工作台待办事项，综合统计分析

张含笑

2025-05-12 2ce9bd5adcd6ffd054f7c5148ab480b36ff6f56a

 src/views/wel/components/flyratio.vue

@@ -61,27 +61,31 @@
  { immediate: true }
);
const pieInit = resList => {
  // 处理数据，过滤掉没有name的项
  const validData = resList.filter(item => item.name);
  // 1. 过滤无效数据并排序
  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',
      axisPointer: {
        type: 'shadow',
      },
      axisPointer: { type: 'shadow' },
      formatter: '{b}: {c}',
    },
    grid: {
@@ -92,60 +96,44 @@
    },
    xAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#E5E5E5',
        },
      },
      axisLabel: {
        color: '#35455aa6',
      },
      splitLine: { lineStyle: { color: '#E5E5E5' } },
      axisLabel: { color: '#35455aa6' },
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: 'category',
      data: optionData.yAxisData, // 使用处理后的分类数据
      axisLabel: {
        color: '#35455aa6',
      },
      axisLine: {
        lineStyle: {
          color: '#D1D1D1',
        },
      },
      axisTick: {
        show: false,
      },
      data: optionData.yAxisData,
      axisLabel: { color: '#35455aa6' },
      axisLine: { lineStyle: { color: '#D1D1D1' } },
      axisTick: { show: false },
      // 4. 确保排序后的数据从上到下显示（最大值在顶部）
      inverse: true
    },
    series: [
      {
        type: 'bar',
        data: optionData.seriesData, // 使用处理后的数值数据
        itemStyle: {
          // 修改为根据索引返回不同颜色
    series: [{
      type: 'bar',
      data: optionData.seriesData,
      itemStyle: {
        color: (params) => {
          if (params.dataIndex < 5) {
            // 前5条使用固定颜色
            return colors[params.dataIndex % colors.length];
          }
          // 第6条及之后保持原渐变
          return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#93BAFF' },
            { offset: 1, color: '#C5DEFF' }
          ]);
          // 前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}',
      },
    }]
  };

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