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

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

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

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

---

参考文章：Echarts X轴（xAxis）

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

axisLine：坐标轴轴线相关设置。

axisTick：坐标轴刻度相关设置。

axisLabel：坐标轴刻度标签的相关设置。

splitLine： 坐标轴在 grid 区域中的分隔线设置。

splitArea ：坐标轴在 grid 区域中的分隔区域，默认不显示。

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

xAxis: {
    show: true,    // 是否显示x轴
    position: 'top',    // x轴的位置（top/bottom） 
    type: 'category',    // 坐标轴类型，值category/value，与y轴呼应，若x轴配置category则y轴配置value
    nameRotate: 10,    // 坐标轴名字旋转，角度值
    inverse: false,    // 是否是反向坐标轴
    boundaryGap: ['20%', '20%'],    // 坐标轴两边留白策略，也可以使用布尔值，true居中
    splitNumber: 5,    // 坐标轴的分割段数（预估值）
    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倾斜字体） 
        // 字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）
        fontWeight: 'normal',    
        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分隔线颜色，可设置单个颜色，也可设置颜色数组，分隔线会按数组中颜色顺序依次循环设置颜色
        color: ['#ccc'],    
        width: 3, // 分隔线线宽
        type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
    },
    splitArea: {
        show: true, // 是否显示分隔区域
        interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        areaStyle: {
            // color分隔区域颜色。分隔区会按数组中颜色顺序依次循环设置颜色。默认是一个深浅的间隔色
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], 
            opacity: 1, // 图形透明度。支持从0到1的数字，为0时不绘制该图形
        },
    },
    data: {
        textStyle: {
            color: '#FFF', // 文字的颜色
            fontStyle: 'normal', // 文字字体的风格（normal无样式；italic斜体；oblique倾斜字体）
            // 字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700） 
            fontWeight: 'normal', 
            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提示框组件配置项大全