Echarts y-axis related configuration

1 Introduction

EchartsThis article introduces some commonly used y-axis coordinate settings when   using drawing, such as y-axis position, y-axis offset, y-axis scale, y-axis maximum and minimum values, etc.;

2 y-axis configuration

2.1 Main attributes of y-axis

When there is only one ordinate, the commonly used y-axis configuration parameters are as follows:

Attributes	type	value
show	boolean	true: Display false: Do not display
type	string	'value': Value axis, suitable for continuous data. 'category' category axis, suitable for discrete category data. 'time' time axis is suitable for continuous time series data. Compared with the numerical axis, the time axis has time formatting and is also different in scale calculation. For example, the month, week, day or month will be decided based on the span range. Hour range scale. 'log' Logarithmic axis. Works for logarithmic data.
name	string	axis name
nameLocation	string	The axis name display position. ' start': starting position (bottom) ' middle' or ' center': middle ' end': end (default)
nameGap	number	The distance between the axis name and the axis line.
inverse	boolean	Whether it is the reverse coordinate axis.
min	number\string\Function	The minimum value of the coordinate axis scale.
max	number\string\Function	Maximum value of coordinate axis scale
scale	boolean	Whether it is out of 0 value ratio. This configuration item is invalid after setting min and max.
splitNumber	number	The number of divided segments of the coordinate axis
minInterval	number	The minimum interval size of the coordinate axis.
maxInterval	number	The maximum interval size of the coordinate axis.
interval	number	Force the axis division interval to be set
logBase	number	The base of the logarithmic axis is only valid in the logarithmic axis (type: 'log'). The default value is 10.
axisLine	Object	Coordinate axis axis related settings axisLine.show: control whether the coordinate axis is displayed.
axisTick	Object	Coordinate axis scale related settings, see 2.2 for details
minorTick	Object	Settings related to coordinate axis minor tick marks, see 2.2 for details.
data	Array	Valid in category axis (type: ' category')
splitLine	Object	The dividing line of the coordinate axis in the grid area, displayed by default;
minorSplitLine	Object	The secondary dividing line of the coordinate axis in the grid area, not displayed by default

2.2 Y-axis scale setting

1. axisTick: coordinate axis scale related settings

Attributes	type	meaning
axisTick.show	boolean	Whether to display coordinate axis scale
axisTick.alignWithLabel	boolean	Whether the tick mark is aligned with the label
axisTick.interval	number	Display interval of coordinate axis scale, default is 1
axisTick.inside	boolean	Whether the coordinate axis scale is facing inwards, the default is outwards
axisTick.length	number	The length of the coordinate axis scale

Example: Set the display scale. The tick marks are aligned with the labels. One scale is displayed every two intervals. The coordinates go inward and the scale length is 10 on the y-axis:

code show as below:

axisTick: {
  show: true,
  alignWithLabel: true,
  interval: 0,
  inside: false,
  length: 20
}

2. minorTick: Settings related to coordinate axis minor tick marks

Attributes	type	meaning
minorTick.show	boolean	Whether to display coordinate axis scale
minorTick.splitNumber	number	The number of sub-tick divisions, which will be divided into 5 segments by default.
minorTick.length	number	The length of the coordinate axis scale

Example: Set the display minor scale, the tick mark is aligned with the label, the number of minor tick divisions is 10, and the length of the coordinate axis scale is 5:

code show as below:

minorTick: {
  show: true,
  splitNumber: 10,
  length: 5
}

Usually setting the sub-scale lines will cause the scale density to change. You can adjust the parameters as needed.

3. Summary

  In most cases, the default configuration provided by Echarts can meet the basic needs, but if you want to achieve the results you want, you must be familiar with the use of parameters. In addition, Echarts also provides richer attributes. This video only introduces some commonly used parameter attributes. If you want to know more, you can go to the official website.

Reference document: Echarts configuration item manual