2023学年完整公开课版Echarts坐标轴设置

Echarts坐标轴设置1、了解坐标轴设置坐标轴设置

配置项展示

坐标轴的常用属性

X轴：直角坐标系grid中的x轴，一般情况下单个grid组件最多只能放上下两个x轴，多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。Y轴：直角坐标系grid中的y轴，一般情况下单个grid组件最多只能放左右两个y轴，多于两个y轴需要通过配置offset属性防止同个位置多个Y轴的重叠。坐标轴设置

Axis坐标轴配置项展示x轴和y轴的属性基本相同，下面以y轴为例来说明坐标轴的常用属性：yAxis.position：string类型，y轴的位置。可选：'left’or'right'yAxis.type：string类型[default:'value']，坐标轴类型。可选：'value'数值轴，适用于连续数据。'category'类目轴，适用于离散的类目数据，为该类型时必须通过data设置类目数据。'time'时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log'对数轴。适用于对数数据。坐标轴的常用属性yA：string类型，坐标轴名称，通常用来标注坐标轴使用，默认显示在x、y轴的顶端，也可以通过后面的nameLocation设置显示的具体位置。yALocation：string类型[default:'end']，坐标轴名称显示位置。可选：'start’or'middle'或者'center’or'end’yATextStyle：Object类型，坐标轴名称的文字样式，在开发过程中经常会使用到的配置项有：color、fontWeight、fontSize、align、width、height等。坐标轴的常用属性yAGap：number类型[default:15]，坐标轴名称与轴线之间的距离。yARotate：number类型[default:null]，坐标轴名字旋转，角度值。yAxis.min：number,string,function类型[default:null]，坐标轴刻度最小值。可以设置成特殊值'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数（如类目轴data:['类A','类B','类C']中，序数2表示'类C'。也可以设置为负数，如-3）。坐标轴的常用属性yAxis.max：number,string类型[default:null]，坐标轴刻度最大值。可以设置成特殊值'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数（如类目轴data:['类A','类B','类C']中，序数2表示'类C'。也可以设置为负数，如-3）。yAxis.splitNumber：number类型[default:5]，坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在类目轴中无效。坐标轴的常用属性yAerval：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类型，axisPointersettingsonaxis。该配置项的具体含义是，当设