问题描述

AntV G2 3.X版本 折线图，无法控制Y轴的0轴位置，也无法让负值显示在X轴下方

问题出现的环境背景及自己尝试过哪些方法

1.修改chart.scale(option)配置里的Y轴min,max，range属性等都无法处理
2.创建新的view(option)，并尝试修改view中配置的min,max也无法处理

相关代码

import React, { useEffect } from 'react';
import { Chart } from '@antv/g2';
import DataSet from '@antv/data-set';
import './index.less';

const Index = () => {
  const data = [
    { x: 1, y: 100.80 },
    { x: 2, y: 111.68 },
    { x: 3, y: 111.5 },
    { x: 4, y: 101.5 },
    { x: 5, y: -58.9 },
    { x: 6, y: 10 },
    { x: 7, y: 99.00 }
  ];
  useEffect(() => {
    const axis = ['x', 'y'];
    const chart = new Chart({
      container: 'chart-container',
      autoFit: true, // 自动填充占满空间
      height: 228,
      padding: {
        top: 18,
        right: 50,
        bottom: 50,
        left: 80
      },
      width: 988
    });
    const view = chart.view({
      start: {
        x: 0,
        y: 0
      },
      end: {
        x: 1,
        y: 1
      }
    });
    view.source(data, {
      'y': {
        type: 'linear', // 连续类型数据
        min: -60, // 设置最小值
        max:112,
        nice: false, // 禁止自动美化数据
        // range:[-1, 1]
      }
    }); // 默认使用 chart 的列定义
    view.line().position(`${axis[0]}*${axis[1]}`).color('#000AB2').tooltip(false);
    view.area().position(`${axis[0]}*${axis[1]}`).color('l(90) 0:#0212B5 1:#f7f7f7').opacity(0.3);
    view.point()
      .position('x*y').shape('circle')
      .style({
          stroke: '#fff',
          lineWidth: 1
      });
    view.render();
  })
  return (
    <div className='chart-container' id='chart-container'></div>
  )
};
export default Index;

你期待的结果是什么？实际看到的错误信息又是什么？

预期：我期待着原点是Y轴的0值，负值显示在X轴下方；
结果：所有的值全部显示在X轴的上方