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)
        },
    })
}