echarts 柱状图 markPoint标注 自定义图片时刷新页面高度变低 大佬help？

Question

柱状图的每一项后需要加一个标注内容，页面初始渲染没有问题

刷新页面时标注的高度就丢失一部分，路由跳转无问题 echarts 5.3.3，代码配置如下
求大神解答

有时是所有都压缩 有时是只有第一项

let count = 0;
let yData = [51, 30, 24, 20, 17, 9, 2];
let yLabel = [
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
];
yData.forEach((item) => {
  count = count + item;
});
const generateDimension = () => {
  let arr = [];
  yData.forEach((item, i) => {
    arr.push({
      name: `${item}`,
      value: `{l|${item}} {r|(${Math.round((item / count) * 100 * 10) / 10}%)}`,
      xAxis: item,
      yAxis: i,
      label: {
        rich: {
          l: {
            color: "#fff",
            fontWeight: 500,
            fontSize: 14,
            fontFamily: "MiSans-Medium, MiSans",
          },
          r: {
            color: "#ffffff80",
            fontWeight: 500,
            fontSize: 14,
            fontFamily: "MiSans-Medium, MiSans",
          },
        },
      },
    });
  });
  return arr;
};
var option = {
  grid: {
    left: "1%",
    right: "4%",
    bottom: "2%",
    top: "1%",
    containLabel: true,
  },
  tooltip: {
    show: true,
    trigger: "axis",
    showContent: true,
    axisPointer: {
      type: "shadow",
    },
    extraCssText: "background:rgba(25, 31, 37, 0.41);color:#fff",
    formatter: function (v) {
      return v[0].name + "：" + v[0].value + "份";
    },
  },
  xAxis: {
    show: true,
    type: "value",
    splitNumber: 4,
    axisLabel: {
      margin: 10,
      fontFamily: "MiSans-Regular, MiSans",
      color: "rgba(255,255,255,0.65)",
      fontSize: 12,
      fontWeight: 400,
    },
    axisLine: {
      show: false,
    },
    max: (value) => {
      return value.max + value.max / 2;
    },
    splitLine: {
      show: true, // X轴线
      lineStyle: {
        type: "dashed",
        color: "rgba(255,255,255,0.15)",
      },
    },
  },
  yAxis: [
    {
      type: "category",
      show: true,
      inverse: true, // 是否反向排列
      axisLabel: {
        margin: 10,
        fontFamily: "PingFang SC-Regular, PingFang SC",
        color: "#ffffffd9",
        fontSize: 12,
        fontWeight: 400,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: yLabel,
    },
  ],
  series: [
    {
      name: "总览",
      type: "bar",
      zlevel: 1,
      markPoint: {
        // symbol: 'rect',
        symbol: `image://https://t7.baidu.com/it/u=2397542458,3133539061&fm=193&f=GIF`,
        symbolSize: [90, 24],
        symbolOffset: ["60%", 0],
        symbolKeepAspect: true,
        animation: false,
        label: {
          show: true,
        },
        itemStyle: {
          color: "#34383c",
        },
        data: generateDimension(),
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 1,
            color: "#00f0ff",
          },
          {
            offset: 0,
            color: "#00aaff00",
          },
        ]),
      },
      barWidth: "40%",
      data: yData,
    },
  ],
};

Answer 1

// symbolKeepAspect: true,
这个属性的问题，你试试