Echarts柱状图标签图片按比例渲染问题求助

针对你遇到的固定宽高导致Logo变形、不设置尺寸差异过大的问题，给你两个实用方案：

方案1：预加载图片动态计算尺寸（精准保持原比例） #

先预加载所有Logo图片获取真实宽高比，再统一控制标签高度，按比例计算宽度，保证所有Logo高度一致且不变形：

// 预加载图片并获取尺寸信息
function loadImages(imageMap) {
  return Promise.all(
    Object.entries(imageMap).map(async ([operator, imgPath]) => {
      const img = new Image();
      img.src = encodeURI(staticLink + imgPath);
      await img.decode(); // 等待图片解码完成，确保获取正确尺寸
      return { operator, width: img.width, height: img.height };
    })
  );
}

// 初始化图表
async function initOperatorsChart() {
  const operatorsChart = echarts.init(document.getElementById('chart-operators'));
  const imageInfos = await loadImages(operatorImages);
  
  // 统一设置标签的固定高度，可根据需求调整
  const fixedLabelHeight = 20;
  // 构建rich配置
  const richConfig = imageInfos.reduce((config, { operator, width, height }) => {
    const key = normalizeKey(operator);
    // 按原比例计算对应宽度
    const scale = fixedLabelHeight / height;
    const adaptiveWidth = Math.round(width * scale);
    
    config[key] = {
      height: fixedLabelHeight,
      width: adaptiveWidth,
      backgroundColor: {
        image: encodeURI(staticLink + operatorImages[operator]),
        repeat: 'no-repeat',
        position: 'center'
      }
    };
    return config;
  }, {});

  operatorsChart.setOption({
    title: { text: "{{operator}}" },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: commonTooltipFormatter
    },
    yAxis: {
      ...commonXAxisOptions,
      type: 'category',
      inverse: true,
      axisLabel: {
        rotate: 0,
        formatter: value => operatorImages[value] ? `{${normalizeKey(value)}|}` : value,
        rich: richConfig
      },
      data: dataToUse.operators[viewMode].map(item => item.operator)
    },
    xAxis: { type: 'value' },
    grid: hGridConfig,
    series: createSeries(
      viewMode === 'km' ? convertToKilometers(dataToUse.operators[viewMode]) : dataToUse.operators[viewMode],
      getColor(tripType)
    )
  });
}

// 启动初始化
initOperatorsChart();

方案优势： #

• 所有Logo高度统一，宽度按原比例自适应，完全不会变形
• 预加载图片确保尺寸计算准确，避免图片未加载导致的比例错误

方案2：用backgroundSize快速适配（无需预加载） #

如果不想处理预加载逻辑，可以直接利用ECharts的backgroundSize: 'contain'属性，让图片在固定尺寸的容器内自适应比例：

// 修改原代码中的rich配置部分
rich: Object.assign({}, ...Object.keys(operatorImages).map(operator => {
  const normalizedKey = normalizeKey(operator);
  return {
    [normalizedKey]: {
      width: 110, // 容器最大宽度
      height: 20, // 容器固定高度
      backgroundColor: {
        image: encodeURI(staticLink + operatorImages[operator]),
        repeat: 'no-repeat',
        position: 'center',
        size: 'contain' // 关键：让图片按比例适配容器
      }
    }
  };
}))

方案优势： #

• 代码改动极小，无需额外逻辑
• 图片自动保持原比例，不会拉伸，容器尺寸统一，布局整齐

额外优化建议 #

如果遇到比例极端的Logo（比如特别宽或特别窄），可以在方案1中加入宽度限制：

const adaptiveWidth = Math.round(width * scale);
// 限制宽度在50-120px之间，避免影响布局
const finalWidth = Math.max(50, Math.min(adaptiveWidth, 120));

内容的提问来源于stack exchange，提问作者Sim