antvg2 环图轮播_antv G2 图标，怎么控制Y轴的0轴，又怎么将负数显示在X轴下方？...

问题描述

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 (

)

};

export default Index;

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

预期：我期待着原点是Y轴的0值，负值显示在X轴下方；

结果：所有的值全部显示在X轴的上方