Skip to content

【echarts使用】之xy轴刻度、文字、轴线样式、分隔线 #8

Open
@yihan12

Description

@yihan12

隐藏x/y轴刻度

// x轴
xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: ['11/25', '11/26', '11/27', '11/28', '11/29', '11/30', '12/1'],
    axisTick: {
        show: false //隐藏x轴刻度
    },
},
// y轴
yAxis: {
    type: 'category',
    splitLine: { show: false },
    data: ['11/25', '11/26', '11/27', '11/28', '11/29', '11/30', '12/1'],
    axisTick: {
        show: false //隐藏y轴刻度
    },
},

更改x/y轴文字

//x轴
xAxis: {
    type: 'category',
    // offset: 40,
    splitLine: { show: false },
    data: [],
    axisLabel: {
        show: true,
        textStyle: {
            color: '#6B6E7F',  //更改坐标轴文字颜色
            fontSize: 9      //更改坐标轴文字大小
        }
    }
},
//y轴
yAxis: {
    type: 'category',
    // offset: 40,
    splitLine: { show: false },
    data: [],
    axisLabel: {
        show: true,
        textStyle: {
            color: '#6B6E7F',  //更改坐标轴文字颜色
            fontSize: 9      //更改坐标轴文字大小
        }
    }
},

更改x/y轴线样式

// x轴
xAxis: {
    type: 'category',
    // offset: 40,
    splitLine: { show: false },
    data: [],
    axisLine: {
        show: false,
        lineStyle: {
            type: 'dashed',
            color: '#86899D'
        }
    } //0 轴线设置样式
},
// y轴
yAxis: {
    type: 'category',
    // offset: 40,
    splitLine: { show: false },
    data: [],
    axisLine: {
        show: false,
        lineStyle: {
            type: 'dashed',
            color: '#86899D'
        }
    } //0 轴线设置样式
},

x/y轴分隔线

// x轴
xAxis: {
    type: 'value',
    axisLabel: {
        show: false,
        interval: 'auto',
        formatter: '{value} AM'
    },
    axisTick: {
        show: false
    },
    splitLine: {
        show: false,
        lineStyle: {
            type: 'dashed',
            color: '#86899D'
        }
    } //设置y轴分割线样式
},
// y轴
yAxis: {
    type: 'value',
    axisLabel: {
        show: false,
        interval: 'auto',
        formatter: '{value} AM'
    },
    min: 20,
    max: 33, // y轴的展示范围
    axisTick: {
        show: false
    },
    splitLine: {
        show: false,
        lineStyle: {
            type: 'dashed',
            color: '#86899D'
        }
    } //设置y轴分割线样式
},

echarts系列

主要是echarts使用。

后续会一直更新,希望各位看官不要吝啬手中的赞。

❤️ 感谢各位的支持!!!

❤️ 如果有错误或者不严谨的地方,请务必给予指正,十分感谢!!!

❤️ 喜欢或者有所启发,欢迎 star!!!

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions