如何让数据点到达Echarts中绘图的末尾

Question

我正在尝试创建一个图表，但由于某种原因，除非单击折线图工具按钮，否则我无法将数据点移至图表的末尾。

我把图表上的所有东西都去掉了，但它仍然做到了。我的 xAxis 选项中有许多不同的字段，但它仍然不会推到最后。

这就是我得到的 -

这就是我正在寻找的 -

它看起来像是由于将标签放置在与蜱有关的位置而造成的，但我尝试过的所有方法都不起作用。

这是我的组件 -

function MoraleLineChart({ data, colors }) {
  const barOptions = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "5%", // Set left padding
      right: "10%", // Set right padding
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "90%",
      top: "center",
      feature: {
        mark: { show: true },
        magicType: { show: true, type: ["line", "bar"] },
      },
    },
    xAxis: [
      {
        type: "category",
        axisLine: { onZero: true },
        axisTick: { show: true, inside: true },
        data: Object.keys(data.analytics.min).map((val) => val),
        axisLabel: {
          inside: false,
          rotate: -25,
          hideOverlap: true,
          truncate: false,
          fontSize: 10,
          nameTruncate: { maxWidth: 5, ellipsis: "..." },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "min",
        type: "line",
        itemStyle: {
          color: colors.min,
        },
        emphasis: {
          focus: "series",
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors.areaTop,
            },
            {
              offset: 1,
              color: colors.areaBase,
            },
          ]),
        },
        data: data.analytics ? Object.values(data.analytics.min) : [],
      },
      {
        name: "mean",
        type: "line",
        label: "Mean",
        itemStyle: {
          color: colors.mean,
        },
        emphasis: {
          focus: "series",
        },

        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors.areaTop,
            },
            {
              offset: 1,
              color: colors.areaBase,
            },
          ]),
        },
        data: data.analytics ? Object.values(data.analytics.mean) : [],
      },
      {
        name: "max",
        type: "line",
        itemStyle: {
          color: colors.max,
        },
        emphasis: {
          focus: "series",
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors.areaTop,
            },
            {
              offset: 1,
              color: colors.areaBase,
            },
          ]),
        },
        data: data.analytics ? Object.values(data.analytics.max) : [],
      },
    ],
  };
  return <ReactEChart option={barOptions} className={"morale-bar-chart"} />;
}

Answer 1

我遇到的问题的解决方案是通过@kikon 的评论中给出的答案解决的。他向我指出了 borderGap 选项，并提供了指向 Echart 文档 的链接。将其设置为 false 就可以了，5 秒即可修复。再次感谢@kikon！