理论教育 如何设置坐标轴并显示坐标轴名称、分隔间隔和轴线配置

如何设置坐标轴并显示坐标轴名称、分隔间隔和轴线配置

时间:2023-11-26 理论教育 版权反馈
【摘要】:③yAxis.name:string类型,坐标轴名称,通常用来标注坐标轴使用,默认显示在x、y轴的顶端,也可以通过nameLocation设置显示的具体位置。若不设置,会自动计算最小值,以保证坐标轴刻度的均匀分布。yAxis.interval:number类型,强制设置坐标轴分隔间隔。yAxis.axisLine:Object类型,坐标轴轴线相关设置,在开发过程中经常会使用到的具体配置项有show、lineStyle等。

如何设置坐标轴并显示坐标轴名称、分隔间隔和轴线配置

对于直角坐标系grid中的x轴,一般情况下单个grid组件最多只能放上、下两个x轴,超出两个x轴,则需要通过配置offset属性来防止同一个位置多个x轴的重叠情况。

对于直角坐标系grid中的y轴,一般情况下单个grid组件最多只能放左、右两个y轴,超出两个y轴,则需要通过配置offset属性来防止同一个位置多个y轴的重叠情况。

x轴和y轴的属性基本相同,下面以y轴为例来说明坐标轴的常用属性。

①yAxis.position:string类型,y轴的位置。可选值:left和right。

②yAxis.type:string类型[default:'value'],坐标轴类型。可选值:

·value,数值轴,适用于连续数据。

·category,类目轴,适用于离散的类目数据。当使用该类型时,必须通过data设置类目数据。

·time,时间轴,适用于连续的时序数据。时间轴带有时间的格式化,在刻度计算上表示会根据跨度的范围来决定使用月、星期、日还是小时范围的刻度。

·log,对数轴。适用于对数数据。

③yAxis.name:string类型,坐标轴名称,通常用来标注坐标轴使用,默认显示在x、y轴的顶端,也可以通过nameLocation设置显示的具体位置。

④yAxis.nameLocation:string类型[default:'end'],坐标轴名称显示位置。可选start、middle或者center、end。

⑤yAxis.nameTextStyle:Object类型,坐标轴名称的文字样式。在开发过程中,经常会使用的配置项有color、fontWeight、fontSize、align、width、height等。

⑥yAxis.nameGap:number类型[default:15],坐标轴名称与轴线之间的距离。

⑦yAxis.nameRotate:number类型[default:null],坐标轴名称旋转角度值。

⑧yAxis.min:number,string,function类型[default:null],坐标轴刻度最小值。

可设置成特殊值“dataMin”,此时取数据在该轴上的最小值作为最小刻度。若不设置,会自动计算最小值,以保证坐标轴刻度的均匀分布

在类目轴中,也可设置为类目的序数(如类目轴data:['类A','类B','类C']中,序数2表示“类C”。也可设置为负数,如-3)。

当设置成function时,可根据计算得出的数据的最大值和最小值来设定坐标轴的最小值。如:

其中,value是一个包含min和max的对象,分别表示数据的最大值和最小值,这个函数应该返回坐标轴的最小值。(www.daowen.com)

⑨yAxis.max:number、string类型[default:null],坐标轴刻度最大值。

可设置成特殊值“dataMax”,此时取数据在该轴上的最大值作为最大刻度,若不设置,会自动计算最大值,以保证坐标轴刻度的均匀分布。

在类目轴中,也可设置为类目的序数(如类目轴data:['类A','类B','类C']中,序数2表示“类C”。也可设置为负数,如-3)。

当设置成function时,可根据计算得出的数据的最大值和最小值设定坐标轴的最小值。如:

其中,value是一个包含min和max的对象,分别表示数据的最大值和最小值,这个函数应该返回坐标轴的最大值。

⑩yAxis.splitNumber:number类型[default:5],坐标轴的分隔段数。要注意,这个分隔段数只是个预估值,实际显示的段数会在此基础上根据分隔后坐标轴刻度显示的易读程度做调整。在类目轴中无效。

⑪yAxis.interval:number类型,强制设置坐标轴分隔间隔。

因为splitNumber是预估值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时可以使用interval配合min、max强制设定刻度划分,但一般不建议使用。

其无法在类目轴中使用。在时间轴(type:'time')中需要传时间戳,在对数轴(type:'log')中需要传指数值。

⑫yAxis.axisLine:Object类型,坐标轴轴线相关设置,在开发过程中经常会使用到的具体配置项有show、lineStyle等。

⑬yAxis.axisTick:Object类型,坐标轴刻度相关设置,在开发过程中经常会使用到的具体配置项有show、interval、length、lineStyle等。

⑭yAxis.axisLabel:Object类型,坐标轴刻度标签的相关设置,在开发过程中经常会使用到的具体配置项有show、interval、inside、rotate、formatter、color、fontSize等。

⑮yAxis.splitLine:Object类型,坐标轴在grid区域中的分隔线,在开发过程中经常会使用到的具体配置项有show、interval、lineStyle等。

⑯yAxis.data[i]:Object类型,类目数据,在类目轴(type:'category')中有效。

如果没有设置type,但设置了axis.data,则认为type是‘category’。

如果设置了type是‘category’,但没有设置axis.data,则axis.data的内容会自动从series.data中获取,这样操作起来比较方便。但需注意的是,axis.data指明的是‘category’轴的取值范围。如果不指定而是从series.data中获取,那么只能获取到series.data中出现的值。比如说,假如series.data为空,就什么也获取不到。

例:

⑰yAxis.axisPointer:Object类型,为坐标指示配置项。该配置项的具体含义是,当设置其配置项show为true时,鼠标放在图表的内容上,坐标轴会显示相应的值,类似于标注线的形状。其中还会有其他详细配置项,如type、label、lineStyle、value等。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈