echarts柱状图文字过多倾斜+省略号显示

需求：后台返回的项目名称太长，导致显示不开。

可以设置成倾斜和省略号显示那种的

通过一下属性：

xAxis.axisLabel. interval（设置成 0 强制显示所有标签）

xAxis.axisLabel. rotate（倾斜角度）

xAxis.axisLabel. formatter（支持字符串模板和回调函数两种形式）

function initThisMonthProjectsRanking() {
    $.ajax({
        url: urlpic + "thisMonthProjectRanking",
        type: 'get',
        data: {
            deptId: '4676',
            page: 1,
            limit: 10
        },
        success: function (res) {
            // console.log(res, '项目排名数据')
            let dataOption = res
            let styleOption = {
                    grid: {
                        left: 25 * sceenRate,
                        right: 15 * sceenRate,
                        top: 15 * sceenRate,
                        bottom: 15 * sceenRate
                    },
                    xAxis: {
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        nameTextStyle: {
                            color: '#a4d1ec'
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#319cc9'
                            }
                        },
                        axisLabel: {
                            interval: 0,//横轴信息全部显示
                            rotate: 15,// 倾斜角度
                            formatter: function(value){
                                return value.length > 10 ? value.substring(0, 10) + '...' : value;
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        nameLocation: 'end',
                        axisLabel: {

                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#319cc9'
                            }
                        },
                        max: 1000,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#092e5e',
                                type: 'dashed'
                            }
                        }
                    }
                }
            let id = 'rankingChart'
            return initCharts(id, dataOption, styleOption)
        },
    })
}