Echarts treemap树图如何使用图片作为区块填充色？

你之前的配置未生效主要有两个核心问题：

1. 直接传入require返回的图片路径字符串，Echarts的图案填充要求image字段必须传入HTMLImageElement实例
2. 缺少repeat配置项，该配置用于指定图片的填充规则，是图案填充的必填项

统一填充单张图片 #

先提前创建并加载图片实例，等图片加载完成后再初始化Echarts实例，避免渲染空白：

// 创建图片实例并加载
const fillImg = new Image();
// Vite项目请用import导入图片路径后赋值给src，或将图片放public目录直接写路径
fillImg.src = require('./french.png');

fillImg.onload = () => {
  const myChart = echarts.init(document.getElementById('treemap-container'));
  const option = {
    series: [
      {
        type: 'treemap',
        data: [/* 你的树图数据 */],
        // 未配置levels时直接写在根itemStyle
        itemStyle: {
          color: {
            image: fillImg,
            // 可选值：repeat / no-repeat / repeat-x / repeat-y / stretch（5.x版本支持，拉伸填满区块）
            repeat: 'stretch'
          },
          borderWidth: 1
        },
        // 若配置了levels层级，需将itemStyle写到对应层级配置中，避免被默认配置覆盖
        /*
        levels: [
          {
            itemStyle: {
              color: {
                image: fillImg,
                repeat: 'stretch'
              }
            }
          }
        ]
        */
      }
    ]
  };
  myChart.setOption(option);
};

不同区块填充不同图片 #

如果需要每个区块对应不同的填充图片，可通过color回调函数动态返回对应图案：

// 提前加载所有需要的图片，存储为映射表
const imgMap = {};
const imgConfig = [
  { key: 'french', src: require('./french.png') },
  { key: 'german', src: require('./german.png') },
  // 其他图片配置
];
let loadedImgCount = 0;

imgConfig.forEach(item => {
  const img = new Image();
  img.src = item.src;
  img.onload = () => {
    imgMap[item.key] = img;
    loadedImgCount++;
    // 所有图片加载完成后再初始化Echarts
    if (loadedImgCount === imgConfig.length) {
      initTreemap();
    }
  };
});

function initTreemap() {
  const myChart = echarts.init(document.getElementById('treemap-container'));
  const option = {
    series: [
      {
        type: 'treemap',
        // 数据项中增加imgKey字段对应图片映射表的key
        data: [
          { name: '法国', value: 120, imgKey: 'french' },
          { name: '德国', value: 90, imgKey: 'german' }
          // 其他数据
        ],
        itemStyle: {
          color: params => {
            return {
              image: imgMap[params.data.imgKey],
              repeat: 'stretch'
            };
          }
        }
      }
    ]
  };
  myChart.setOption(option);
}

注意事项 #

• 不要在color配置中直接创建Image实例，避免每次渲染重复加载图片，导致性能问题或闪烁
• 如果图片需要自适应区块大小，Echarts 5.x及以上版本可直接将repeat设为stretch实现自动拉伸填满
• Vite项目不支持require语法导入静态资源，可通过import提前导入图片路径，或将图片放置在public目录下直接填写路径字符串

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