echarts的graph中节点改成图片并且把图片切成圆形、给图片节点加边框

关系图中节点改成圆形图片

查到的方法有在data中编辑节点时，添加这个属性

symbolClipPath: 'circle',     // 将图片裁剪为圆形

但是我使用这个属性不生效。

将图片切成圆形：

// 引入并定义图片裁剪函数
async function getImgData(imgSrc: string): Promise<string> {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const img = new Image();
    img.crossOrigin = 'Anonymous'; // 处理跨域

    img.onload = function () {
      const center = {
        x: img.width / 2,
        y: img.height / 2,
      };
      const diameter = Math.min(img.width, img.height); // 使用较小的一边作为直径，避免图片被拉伸
      canvas.width = diameter;
      canvas.height = diameter;
      context.clearRect(0, 0, diameter, diameter);
      context.save();
      context.beginPath();
      const radius = diameter / 2;
      context.arc(radius, radius, radius, 0, 2 * Math.PI); // 画出圆
      context.clip(); // 裁剪上面的圆形
      context.drawImage(
        img,
        center.x - radius,
        center.y - radius,
        diameter,
        diameter,
        0,
        0,
        diameter,
        diameter
      ); // 在刚刚裁剪的圆上画图
      context.restore(); // 还原状态
      resolve(canvas.toDataURL('image/png'));
    };

    img.src = imgSrc;
  });
}


// 然后在图表代码前面写
// 预处理图片
  const imgSrc =
    'https://img1.baidu.com/it/u=3224573307,745892360&fm=253&fmt=auto&app=138&f=JPEG?w=190&h=190';
  const circleImgData = await getImgData(imgSrc);

  // 更新节点配置  节点中的第一个节点
  data[0].symbol = `image://${circleImgData}`;

查到  当节点使用图片时，默认的itemStyle可能被图片覆盖（包括边框、背景色等）

给节点图片加边框：

// 引入并定义图片裁剪函数
async function getImgData(imgSrc: string): Promise<string> {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    const img = new Image()
    img.crossOrigin = 'Anonymous' // 处理跨域

    img.onload = function () {
      const center = {
        x: img.width / 2,
        y: img.height / 2,
      }
      const diameter = Math.min(img.width, img.height) // 使用较小的一边作为直径，避免图片被拉伸
      canvas.width = diameter + 10;  // 扩大画布以容纳边框
      canvas.height = diameter + 10
      context.clearRect(0, 0, diameter, diameter)
      context.save()
      context.beginPath()
      const radius = (diameter + 10) / 2;
      context.arc(radius, radius, radius - 10, 0, 2 * Math.PI); // 留出边框空间-- 画出圆
      context.strokeStyle = '#efa7a7'; // 边框颜色
      context.lineWidth = 10;          // 边框宽度
      context.stroke();
      context.clip() // 裁剪上面的圆形
      context.drawImage(img, 2, 2, diameter, diameter); // 图片位置偏移
      context.restore() // 还原状态
      resolve(canvas.toDataURL('image/png'))
    }
    img.src = imgSrc
  })
}