For the X-axis and Y-axis in the graph, there are at most two x-axes in a grid. More than two axes need to be configured through the offset property.
1. xAxis and yAxis attribute configuration of coordinate system
option={
xAxis:[
{
id:'1', //Component ID
show:true, //Whether to display the x/y axis
gridIndex:0, //The index of the grid where the x/y axis is located, the default is the first grid, and the index starts from 0
alignTicks:true, // Configure automatic alignment of ticks when using multiple axis degrees
position:'top' // The position of the coordinate axis
offset:50, // offset of coordinate axis
type:'category', // Axis type
name:'X/Y axis', // Axis name
nameLocation:'end', //The location of the axis name
//Axis name style
nameTextStyle:{
color:'red', //text color
fontStyle:'normal', //Font style
fontWeight:'normal', //Font weight
fontFamily:'sans-serif',//Font
fontSize:12, //font size
align:'left', //font horizontal alignment
verticalAlign:'top', //Vertical alignment
lineHeight:10, //line height
backgroundColor:'red', //text block background color, you can use pictures
borderColor:'red', //text block border color
borderWidth:5, //text block border width
borderType:'solid', //text block stroke
borderDashOffset:10, //The offset when the stroke is a dotted line
borderRadius:10, //Text block rounded corners
padding:[5,5,5,5], //text block inner margin
shadowColor:'red', //text block shadow color
shadowBlur:10, //Shadow degree
shadowOffsetX:10, //The offset of the shadow in the horizontal direction
shadowOffsetY:10, //The offset of the shadow in the vertical direction
width:50, //Text display width
height:50, //text display height
textBorderColor:'red', //Stroke color of text
textBorderWidth:10, //stroke width
textBorderType:'solid', //stroke type
textBorderDashOffset:10,//dotted line offset
textShadowColor:'red', //Shadow color of text
textShadowBlur:10, //text shadow length
textShadowOffsetX:10, //Text shadow horizontal offset
textShadowPffsetY:10, //vertical offset of text shadow
overflow:'none', //Whether the text exceeds the width and is truncated or wrapped?
ellipsis:'···', //When the text exceeds truncation, the content displayed at the end
// Set the rich style of the axis name box
rich:{
//The text style here takes precedence over the above configuration, and is the same as the configuration included in nameTextStyle above.
color:'red', //font color
fontStyle: "italic", //Font style
fontWeight: 'normal', //Font weight
fontFamily:'sans-serif',//Font
fontSize:12, //font size
align:'left', //font horizontal alignment
verticalAlign:'top', //Vertical alignment
lineHeight:10, //line height
//···slightly
},
},
nameGap:15, //The distance between the coordinate axis name and the coordinate axis
nameRotate:true, //Rotation angle of coordinate axis name
inverse:true, //Whether the coordinate axis is reversed
boundaryGap:true, //The gap on both sides of the coordinate axis
//The following only works for numerical values
min:10, //Set the minimum value of the coordinate axis scale
max:150, //Set the maximum value of the coordinate axis scale
scale:true, //Whether the scale requires 0 scale
splitNumber:5, //The number of segments divided by the coordinate axis
maxInterval:50, //Maximum interval value of coordinate axis
interval:50, //Force limit the axis interval value
logBase:10, //The base of the logarithmic axis, only valid in the logarithmic axis (type: 'log').
silent:true, //Whether the coordinate axis is static and cannot be interacted with
triggerEvent:true, //Whether the axis label responds and triggers mouse events, it does not respond by default.
//Axis related settings
axisLine:{
show:true, //Whether to display the coordinate axis line
onZero:true, //Whether the axis is on the 0 scale of another axis
onZeroAxisIndex:10, //When there are two axes, set which 0 scale to start from
symbol: ['circle','circle'], //The shapes on both sides of the axis can be pictures
symbolSize:[10,10], //Shape size on both sides of the axis
symbolOffset:[10,10], //Shape offset on both sides of the axis
//The style of the coordinate axis axis
lineStyle: {
color:'red', //The color of the axis
width:5, //The width of the axis
type:'solid', //axis type
dashOffset:10, //When the axis is a dotted line, the offset of the dotted line
cap:'butt', //The shape of the end of the line segment
join:'bevel', //The shape of the connected parts of the line segments
miterLimit:10, //When join is miter, set the slope limit ratio
shadowBlur:50, //The shadow size of the axis
shadowColor:'red', //Shadow color
shadowOffsetX:10, //The offset of the shadow in the horizontal direction
shadowOffsetY:10, //The offset of the shadow in the vertical direction
opacity:0.5, //axis transparency
}
},
// Axis scale related settings
axisTick:{
show:true, //Whether the axis scale is displayed
alignWithLabel:true, //Whether the tick mark is aligned with the label
interval:'auto', //Set to 1, indicating that every other label is displayed.
inside:true, //The direction of the tick mark is inward or outward
length:10, //coordinate axis scale length
lineStyle:{
color:'red', //The color of the line
width:5, //Width of line
type:'solid', //Line type
dashOffset:10, //When the line is a dotted line, the offset of the dotted line
cap:'butt', //The shape of the end of the line segment
join:'bevel', //The shape of the connected parts of the line segments
miterLimit:10, //When join is miter, set the slope limit ratio
shadowBlur:50, //The shadow size of the line
shadowColor:'red', //Shadow color
shadowOffsetX:10, //The offset of the shadow in the horizontal direction
shadowOffsetY:10, //The offset of the shadow in the vertical direction
opacity:0.5, //Line transparency
},
},
//minor tick mark
minorTick:{
show:true, //Whether to display sub-scales
splitNumber:10, //The number of sub-tick divisions
length:5, //The length of the minor tick mark
//Line style
lineStyle:{
// Same as lineStyle above...
},
},
// tick labels
axisLabel:{
show:true, //Whether to display tick labels
interval:auto, //label interval
inside:true, //label facing inside or outside
rotate:80, //label rotation angle
margin:10, //The distance between the scale label and the axis
formater:funtion(value,index){ //Tag content formatting
return 'Tag name:' + value;
},
showMinLabel:true, //Whether to display the label of the minimum value
showMaxLabel:true, //Whether to display the label of the maximum value
hideOverLap:true, //Whether to hide overlapping labels
//Label font style, content is consistent with nameTextStyle
color:'red', //font color
fontStyle:'normal', //Font style
//···slightly
},
// Axis dividing line
splitLine{
show:true, //Whether to display the dividing line
interval:1, //The value is 2, indicating that one label is displayed every two labels.
//Line style
lineStyle:{
// Same as lineStyle above...
},
},
//The dividing line of the minor tick mark
minorSplitLine:{
show:true,
//Line style
lineStyle:{
// Same as lineStyle above...
},
},
// Split areas are used to decorate graphics and can be used to make stripes similar to zebra crossings.
splitArea:{
interval:'auto', //Display the number of intervals
show:true, //Whether to display the separated area
//The style of the divided area
areaStyle:{
color:'red', //The color of the divided area
shoedowBlur:10, //area shadow degree
shadowColor:'red',//shadow color
shadowOffsetX:10, // The offset of the shadow in the horizontal direction
shadowOffsetY:10, // The offset of the shadow in the vertical direction
opacity:0.5, //Transparency
},
},
//Data, and individual configuration of data styles
data:[{
value:'value one',
//The text style is the same as the axis name style nameTextStyle above.
textStyle:{
color:'red', // ···Original
},
},
{
value:'value two',
//The text style is the same as the axis name style nameTextStyle above.
textStyle:{
color:'red', // ···Original
},
}],
// Axis indicator configuration item. This configuration item can refer to the indicator coordinate configuration in the previous article. It is exactly the same and can be copied directly.
axisPointer:{
// ··· slightly
},
//Data loading animation configuration
animation:true, //Whether to enable data loading animation
animationThreshold:100, //animation threshold
animationDuration:100, //The duration of the initial animation
animationEasing:'linear', //Animation type
animationDelay:200, //Initial animation delay
animationDurationUpdate:100, //The duration of the data update animation
animationEasingUpdate:100, //Update animation cache effect
animationDelayUpdate:100, //Delay to update animation
zlevel:1, // The zlevel value of all graphics on this axis. This is the priority of graphics display.
z:1, // The z value of all graphics on this axis z is the priority of drawing graphics
}
]
}
2. Anatomy diagram
3. Basic examples of using rich text in title names
option=[
xAxis: [
{
name:'{a|prefix\\
suffix}', //Use a text style and b text style
type: 'category',
boundaryGap: false,
nameTextStyle:{
backgroundColor:'red',
width:350,
height:50,
rich:{
a:{ // a text style object
color: 'red', // text color
fontSize: 18, // overall size
fontWeight: 'bold', // font width
lineHeight: 30, // line height
backgroundColor: { // background color
image: 'https://hao2.qhimg.com/t014d87a11b2845786e.webp' //Background image path
},
padding: [0, 10, 0, 0] //Control the distance between "prefix" and "suffix" //Padding
},
b: { // b text style object
color: 'blue',
fontSize: 14,
align:'left',
fontWeight: 'normal',
lineHeight: 20,
backgroundColor: {
image: 'https://hao2.qhimg.com/t0152d7129cdb9f6e60.webp'
}
}
}
},
],
]
Rendering:
