echarts的graphic插入图片如何更变其中心点保持始终在圆环中心？

  • Z时代
  • 2024-03-12
  • 分类：IT

echarts的graphic插入图片如何更变其中心点保持始终在圆环中心？

我的圆环中心点为[28%,50%]，我需要将graphic的图片一直在中心，但是发现其基准点都是为图片左上角，也没有设置偏移量的配置参数，硬将其调整百分比居中了，在其他分辨率就可能会有偏移了，该如何解决

graphic: [
  {
    type: 'image',
    silent: true,
    style: {
      image: require('../assets/pieGrapic.jpg'),
      width: 110,
      height: 110,
      // x: -55,
      // y: -55,
    },
    bounding: 'raw',
    top: 'middle',
    left: showLegend ? '28%' : '50%',
  },
],
series: {
  name: '',
  type: 'pie',
  center: [showLegend ? '28%' : '50%', '50%'],
  ....
}

回答：

用 position：

const imageWidth = 110;
const imageHeight = 110;
const centerX = showLegend ? '28%' : '50%';
const centerY = '50%';
graphic: [
  {
    type: 'image',
    silent: true,
    style: {
      image: require('../assets/pieGrapic.jpg'),
      width: imageWidth,
      height: imageHeight,
    },
    // 用 position来设置图片的位置
    position: [centerX, centerY],
    origin: [imageWidth / 2, imageHeight / 2],
    bounding: 'raw',
  },
],
series: {
  name: '',
  type: 'pie',
  center: [centerX, centerY],
  // ...
}

回答：

直接绝对定位定到背面

以上是 echarts的graphic插入图片如何更变其中心点保持始终在圆环中心？ 的全部内容， 来源链接： utcz.com/p/934775.html

回到顶部