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', //组件ID
show:true, //是否显示 x/y 轴
gridIndex:0, // x/y 轴所在 grid 的索引，默认为第一个 grid 网格,索引从 0 开始
alignTicks:true, // 多个轴度时，配置自动对齐刻度
position:'top' // 坐标轴的位置
offset:50, // 坐标轴的偏移
type:'category', // 坐标轴类型
name:'X/Y轴', // 坐标轴名称
nameLocation:'end', // 坐标轴名称的位置
//坐标轴名称样式
nameTextStyle:{
color:'red', //文字颜色
fontStyle:'normal', //字体风格
fontWeight:'normal', //字体粗细
fontFamily:'sans-serif',//字体
fontSize:12, //字体大小
align:'left', //字体水平对齐方式
verticalAlign:'top', //竖直对齐方式
lineHeight:10, //行高
backgroundColor:'red', //文字块背景颜色，可以用图片
borderColor:'red', //文字块边框颜色
borderWidth:5, //文字块边框宽度
borderType:'solid', //文字块描边
borderDashOffset:10, //描边为虚线时的偏移量
borderRadius:10, //文字块圆角
padding:[5,5,5,5], //文字块内边距
shadowColor:'red', //文字块阴影颜色
shadowBlur:10, //阴影程度
shadowOffsetX:10, //阴影在水平方向上的偏移
shadowOffsetY:10, //阴影在竖直方向上的偏移
width:50, //文本显示宽度
height:50, //文本显示高低
textBorderColor:'red', //文字的描边颜色
textBorderWidth:10, //描边宽度
textBorderType:'solid', //描边类型
textBorderDashOffset:10,//虚线偏移量
textShadowColor:'red', //文字的阴影颜色
textShadowBlur:10, //文字阴影长度
textShadowOffsetX:10, //文字阴影水平偏移量
textShadowPffsetY:10, //文字阴影竖直偏移量
overflow:'none', //文字超出宽度是否截断或者换行
ellipsis:'···', //文字超出截断时，末尾显示的内容
// 设置坐标轴名称盒子的丰富样式
rich:{
//这里的文字样式优先于上面的配置,同上面的 nameTextStyle包含的配置一样
color:'red', //字体颜色
fontStyle: "italic", //字体风格
fontWeight: 'normal', //字体粗细
fontFamily:'sans-serif',//字体
fontSize:12, //字体大小
align:'left', //字体水平对齐方式
verticalAlign:'top', //竖直对齐方式
lineHeight:10, //行高
//···略
},
},
nameGap:15, //坐标轴名称与坐标轴的距离
nameRotate:true, //坐标轴名称的旋转角度
inverse:true, //坐标轴是否反向
boundaryGap:true, //坐标轴两边间隙
//以下仅对数值奏效
min:10, //设置坐标轴刻度的最小值
max:150, //设置坐标轴刻度的最大值
scale:true, //刻度是否需要 0 刻度
splitNumber:5, //坐标轴分割段数
maxInterval:50, //坐标轴最大间隔值
interval:50, //强制限制坐标轴间隔值
logBase:10, //对数轴的底数，只在对数轴中（type: 'log'）有效。
silent:true, //坐标轴是否静态无法交互
triggerEvent:true, //坐标轴的标签是否响应和触发鼠标事件，默认不响应。
//轴线相关设置
axisLine:{
show:true, //是否显示坐标轴轴线
onZero:true, //轴线是否在另一个轴的 0 刻度上
onZeroAxisIndex:10, //当有双轴时，设置从哪一个 0 刻度开始
symbol: ['circle','circle'],//轴线两边的形状，可为图片
symbolSize:[10,10], //轴线两边的形状大小
symbolOffset:[10,10], //轴线两边的形状偏移
// 坐标轴轴线的样式
lineStyle：{
color:'red', //轴线的颜色
width:5, //轴线的宽度
type:'solid', //轴线类型
dashOffset:10, //轴线为虚线时，虚线的偏移量
cap:'butt', //线段末端的形状
join:'bevel', //线段相连部分的形状
miterLimit:10, //join 为 miter 时，设置斜面限制比例
shadowBlur:50, //轴线的阴影大小
shadowColor:'red', //阴影颜色
shadowOffsetX:10, //阴影在水平方向上的偏移
shadowOffsetY:10, //阴影在竖直方向上的偏移
opacity:0.5, //轴线透明度
}
},
// 轴刻度相关设置
axisTick:{
show:true, //轴刻度是否显示
alignWithLabel:true, //刻度线是否和标签对齐
interval:'auto', //设置为 1，表示 隔一个标签显示一个标签
inside:true, //刻度线方向朝内还是朝外
length:10, //坐标轴刻度长度
lineStyle:{
color:'red', //线的颜色
width:5, //线的宽度
type:'solid', //线类型
dashOffset:10, //线为虚线时，虚线的偏移量
cap:'butt', //线段末端的形状
join:'bevel', //线段相连部分的形状
miterLimit:10, //join 为 miter 时，设置斜面限制比例
shadowBlur:50, //线的阴影大小
shadowColor:'red', //阴影颜色
shadowOffsetX:10, //阴影在水平方向上的偏移
shadowOffsetY:10, //阴影在竖直方向上的偏移
opacity:0.5, //线透明度
},
},
//次刻度线
minorTick:{
show:true, //是否显示次刻度
splitNumber:10, //次刻度线分割数
length:5, //次刻度线的长度
//线的样式
lineStyle:{
// 同上的 lineStyle 一样 ···
},
},
// 刻度标签
axisLabel:{
show:true, //是否显示刻度标签
interval:auto, //标签间隔
inside:true, //标签朝内还是朝外
rotate:80, //标签旋转角度
margin:10, //刻度标签与轴线距离
formater:funtion(value,index){ //标签内容格式化
return '标签名称：'+ value;
},
showMinLabel:true, //是否显示最小值的标签
showMaxLabel:true, //是否显示最大值的标签
hideOverLap:true, //是否隐藏重叠的标签
//标签字体样式 ，内容同 nameTextStyle 一致
color:'red', //字体颜色
fontStyle:'normal', //字体风格
//···略
},
// 坐标轴分隔线
splitLine{
show:true, //是否显示分割线
interval:1, //值为 2，表示隔两个标签显示一个标签，
//线的样式
lineStyle:{
// 同上的 lineStyle 一样 ···
},
},
// 次刻度线的分割线
minorSplitLine:{
show:true,
//线的样式
lineStyle:{
// 同上的 lineStyle 一样 ···
},
},
// 分割区域 用来装饰图形的，可以用来做 斑马线类似的条纹
splitArea:{
interval:'auto', //显示间隔数
show:true, //是否显示分隔区域
//分割区域的样式
areaStyle:{
color:'red', //分割区域的颜色
shoadowBlur:10, //区域阴影程度
shadowColor:'red',//阴影颜色
shadowOffsetX:10, // 阴影在水平方向上的偏移
shadowOffsetY:10, // 阴影在竖直方向上的偏移
opacity:0.5, //透明度
},
},
//数据，以及数据样式的单独配置
data:[{
value:'值一',
//文字样式同 上面的坐标轴名称样式 nameTextStyle一样的内容
textStyle:{
color:'red', // ···略
},
},
{
value:'值二',
//文字样式同 上面的坐标轴名称样式 nameTextStyle一样的内容
textStyle:{
color:'red', // ···略
},
}],
// 坐标轴指示器配置项。这个配置项可参考上一篇文章中的 指示器坐标配置，一模一样，可直接复制过来
axisPointer:{
// ··· 略
},
// 数据加载动画配置
animation:true, //是否开启数据加载动画
animationThreshold:100, //动画阀值
animationDuration:100, //初始动画的时长
animationEasing:'linear', //动画类型
animationDelay:200, //初始动画延迟
animationDurationUpdate:100, //数据更新动画的时长
animationEasingUpdate:100, //更新动画缓存效果
animationDelayUpdate:100, //更新动画的延迟
zlevel:1, // 该轴上所有图形的 zlevel值 ，这个是图形显示的优先级
z:1, // 该轴所有图形的 z 值 z 为绘制图形优先级
}
]
}2. Anatomy diagram
3. Basic examples of using rich text in title names
option=[
xAxis: [
{
name:'{a|前缀\n后缀}', //使用 a 文本样式 和 b 文本样式
type: 'category',
boundaryGap: false,
nameTextStyle:{
backgroundColor:'red',
width:350,
height:50,
rich:{
a:{ // a 文本样式对象
color: 'red', // 文字颜色
fontSize: 18, // 整体大小
fontWeight: 'bold', // 字体宽度
lineHeight: 30, // 行高
backgroundColor: { // 背景颜色
image: 'https://hao2.qhimg.com/t014d87a11b2845786e.webp' //背景图片路径
},
padding: [0, 10, 0, 0] // 控制"前缀"与"后缀"之间的距离 //内边距
},
b: { // b 文本样式对象
color: 'blue',
fontSize: 14,
align:'left',
fontWeight: 'normal',
lineHeight: 20,
backgroundColor: {
image: 'https://hao2.qhimg.com/t0152d7129cdb9f6e60.webp'
}
}
}
},
],
]Rendering:
