Echarts自定义Y轴

官方教程实例

Echarts自定义Y轴_第1张图片
1-Y轴默认.png

修改后:


Echarts自定义Y轴_第2张图片
2-1-字符串模板自定义Y轴刻度.png

代码:

let option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {
                //设置Y轴刻度
            type: 'value', //坐标轴类型,一定要写,否则显示会出问题
            axisLabel: {
                formatter: '{value} 件'  //刻度标签的内容格式器,支持字符串模板和回调函数两种形式,按照自己需求设置
            },
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 46, 20]
        }]
    };
Echarts自定义Y轴_第3张图片
2-2-回调函数自定义Y轴.png
let option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter:function(value,index){
                    let texts = [];
                    if(value == 0){
                        texts.push('零件');
                    }else if(value == 10){
                        texts.push('拾件');
                    }else if(value == 20){
                        texts.push('贰拾件');
                    }else if(value == 30){
                        texts.push('叁拾件');
                    }else if(value == 40){
                        texts.push('肆拾件');
                    }else if(value == 50){
                        texts.push('伍拾件');
                    }
                    return texts;
                }
            },
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 46, 20]
        }]
    };

你可能感兴趣的:(Echarts自定义Y轴)