echarts 动态设置y轴单位_Recharts动态设置y轴的最大值最小值

问题描述：根据父组件传来的值来动态设置柱状图Y轴的刻度线

使用配置属性：domain

当 y 轴是数值轴时，通过这个配置可以指定 y 轴刻度函数的定义域。这个配置是一个二元数组，数组中的元素可以是一个数值，“auto”, “dataMin”, “dataMax” 或者类似于"dataMin - 100", “dataMax + 200"这样的字符串。如果任意元素的取值为"auto”，我们会生成可读性高的刻度，并且保证设置的刻度数。

默认值：[0, ‘auto’]

示例代码：

export default class DetailBar extends React.Component{

render() {

const {width,height,data,names} = this.props

if(data===null){

return

}

if (data.length === 0){

return

无数据

}

//拿到data中的最大值,最小值

const max = Math.max.apply(Math, data.map(function(f:any) {return f.value}))

const min = Math.min.apply(Math, data.map(function(f:any) {return f.value}))

const stringArr = Object.keys(data[0])//['time','value','valueY']

return(

width={width}

height={height}

data={data}

>

type={'number'}

domain={[min, max]}//设置domain

/>

)

}

}

这样该柱状图的y轴最小值就是min,最大值max。然后根据这二个值生成可读性高的刻度~

本文地址：https://blog.csdn.net/weixin_44824839/article/details/107367524

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！