BizCharts Version: 4.0.17
Platform: window10 chrome 87.0.4280.88
Mini Showcase(like screenshots):
forck and create a demo: https://bizcharts.net/gist/2DjDhAIdtzt

官网 DataRegion示例 中, 将代码稍作修改后:

import React, { useState, useEffect } from "react";
import { Chart, Point, Line, Annotation } from "bizcharts";

const scale = {
  rate: {
    nice: true,
  },
};
const dataRegionCfg = {
  start: ["2014-07-17", 4.192],
  end: ["2016-10-22", 2.364],
  text: {
    content: "【关键区间】",
  },
  lineLength: 50,
};
function Demo() {
  const [data, setData] = useState();
  useEffect(() => {
    fetch("https://gw.alipayobjects.com/os/antvdemo/assets/data/income.json")
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        setData(data);
      });
  }, []);

  return (
    <Chart height={400} data={data} autoFit scale={scale}>
      <Line position="time*rate" />

      <Point
        position="height*weight"
        color="gender"
        shape={["gender", ["circle", "square"]]}
        style={{
          fillOpacity: 0.85,
        }}
      />
      <Annotation.DataRegion {...dataRegionCfg} />
    </Chart>
  );
}

ReactDOM.render(<Demo />, mountNode);

会出现DataRegion上方倾斜问题: