feat:图片修改成svg,更换字体

张含笑

2025-05-19 e1326172aa2d97e97d0ddff8df680899f78adf4b

 src/views/wel/components/flyratio.vue

@@ -9,7 +9,8 @@
      </div>
    </div>
    <div class="nestCenter">
      <div class="chart" ref="echartsRef"></div>
      <div class="chart" ref="echartsRef" ></div>
   
    </div>
  </div>
</template>
@@ -48,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',
@@ -94,42 +88,49 @@
      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;
@@ -156,7 +157,7 @@
        color: #7c8091;
      }
      .total-number {
        font-family: 'YouSheBiaoTiHei';
        font-family: 'Source Han Sans CN';
        font-weight: bold;
        font-size: 32px;
        color: #2a54ff;
@@ -185,7 +186,7 @@
          color: #383838;
        }
        .status-value {
          font-family: 'YouSheBiaoTiHei';
           font-family: 'Source Han Sans CN';
          font-weight: bold;
          font-size: 20px;
        }