三、Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全

🍓 作者主页：💖仙女不下凡💖

🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！

参考文章：Echarts X轴（xAxis）

xAxis与yAxis中有很多配置项，下面我以xAxis进行详解，yAxis参考xAxis即可

• nameTextStyle：坐标轴名称的文字样式
• axisLine：坐标轴轴线相关设置。
• axisTick：坐标轴刻度相关设置。
• axisLabel：坐标轴刻度标签的相关设置。
• splitLine： 坐标轴在 grid 区域中的分隔线设置。
• splitArea ：坐标轴在 grid 区域中的分隔区域，默认不显示。

上述xAxis与yAxis中的配置项，其中也会含有很多属性，具体使用请参考一下内容。

xAxis:{id:'',show:true,//是否显示x轴gridIndex:0,//轴所在grid索引，默认位于第一个gridalignTicks:false,//在多个轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效position:'top',//轴的位置（top/bottom） offset:0,//轴相对于默认位置的偏移，在相同的position上有多个轴时有用type:'category',//坐标轴类型，值category/value，与y轴呼应，若x轴配置category则y轴配置valuename:'',//坐标轴名称nameLocation:'end',//坐标轴名称显示位置，可选值start/middle[或者center]/endnameTextStyle:{},//一般样式也很少直接修改且内容过多待更新... ...nameGap:15,//坐标轴名称与轴线间距离nameRotate:10,//坐标轴名字旋转，角度值inverse:false,//是否是反向坐标轴boundaryGap:['20%','20%'],// 坐标轴两边留白策略，也可以使用布尔值，true居中min:'',//刻度最小值max:'',//刻度最大值scale:false,//只在数值轴中type: 'value'有效, 设置min和max后无效。是否是脱离 0 值比例。设置成true后坐标刻度不会强制包含零刻度。在双数值轴的散点图中较有用splitNumber:5,//坐标轴的分割段数（预估值）minInterval:0,//自动计算坐标轴最小间隔，例：设置成1，刻度没有小数maxInterval:'',//自动计算坐标轴最大间隔axisLine:{show:true,// 是否显示坐标轴轴线symbol:['none','arrow'],// 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头symbolSize:[10,15],// 轴线两端箭头大小，数值一表示宽度，数值二表示高度lineStyle:{color:'#333',// 坐标轴线线的颜色width:'5',// 坐标轴线线宽type:'solid',// 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）},},axisTick:{show:true,// 是否显示坐标轴刻度inside:true,// 坐标轴刻度是否朝内，默认朝外length:5,//坐标轴刻度的长度        lineStyle:{color:'#FFF',//刻度线的颜色width:10,//坐标轴刻度线宽type:'solid',//坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）},},axisLabel:{show:true,//是否显示刻度标签interval:'0',//坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有inside:true,//刻度标签是否朝内，默认朝外rotate:90,//刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度margin:10,//刻度标签与轴线之间的距离// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式color:'#FFF',// 刻度标签文字的颜色fontStyle:'normal',// 字体的风格（normal无样式；italic斜体；oblique倾斜字体）         fontWeight:'normal',// 字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）fontSize:'20',//文字字体大小align:'left',// 文字水平对齐方式，默认自动（left/center/right）verticalAlign:'left',// 文字垂直对齐方式，默认自动（top/middle/bottom)lineHeight:'50',// 行高backgroundColor:'red',// 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)},splitLine:{show:true,// 是否显示分隔线。默认数值轴显示，类目轴不显示interval:'0',// 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有        color:['#ccc'],//color分隔线颜色，可设置单个颜色，也可设置颜色数组，分隔线会按数组中颜色顺序依次循环设置颜色width:3,// 分隔线线宽type:'solid',// 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）},splitArea:{show:true,// 是否显示分隔区域interval:'0',// 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有areaStyle:{color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//color分隔区域颜色。分隔区会按数组中颜色顺序依次循环设置颜色。默认是一个深浅的间隔色opacity:1,// 图形透明度。支持从0到1的数字，为0时不绘制该图形},},data:{textStyle:{color:'#FFF',// 文字的颜色fontStyle:'normal',// 文字字体的风格（normal无样式；italic斜体；oblique倾斜字体）             fontWeight:'normal',//字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）fontSize:'20',// 文字字体大小align:'left',// 文字水平对齐方式，默认自动（left/center/right）verticalAlign:'left',// 文字垂直对齐方式，默认自动（top/middle/bottom）lineHeight:'50',// 行高backgroundColor:'red',// 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)}}}

👉推荐相关文章：Echart图表 之 基本使用及配置项

👉推荐相关文章：Echart图表 之 title配置项大全

👉推荐相关文章：Echart图表 之 颜色color配置项大全

👉推荐相关文章：Echart图表 之 legend图例组件配置项大全

👉推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全

👉推荐相关文章：Echart图表 之 toolbox工具栏组件配置项大全