Echarts柱状图-Y轴分上下两行显示文字(避免文字遮挡)

Echarts柱状图-Y轴分上下两行显示文字(避免文字遮挡)_第1张图片

// 创建图表配置数据
this.options = {
    title: {
        left: 'center',
        text: this.title,
    },
    tooltip:{
        trigger:"axis"
    },
    legend:{
        data:[],
        y:'bottom'
    },
    grid:{
        top:40,
        bottom:45
    },
    calculable:true,
    xAxis:[{
        type:"category",
        data:this.axisData,
        axisLine:{lineStyle:{color:"#008acd"}},
        axisLabel:{
                interval: 0,
                formatter: function(value, index){                             
                if (index  %  2  !=  0)  {                                          
                  return  '\n'  +  value;                                      
                }                                      
                else  {                                          
                  return  value;                                      
                }                                  
            },
        },
    }],
    yAxis:[{
        type:"value",
        axisLine:{lineStyle:{color:"#008acd"}},
        nameTextStyle:{padding:[10,0]},
        axisLabel: {
            show: true,
            interval: 'auto',
            formatter: function(params){
                if(el.type === 'line' && el.title.indexOf('率') != -1){
                    return params + '%'
                }else{
                    return params
                }
            }
        },
        show: true
    }],
    series : this.series
}

你可能感兴趣的:(前端,js)