echarts x/y轴坐标文字过长的解决办法(换行)

1、创建一个方法

 // 参数一:是你的option
// 参数二:是多少个字就换行
// 参数三:是x轴还是y轴 可选项 'yAxis' OR 'xAxis'
 newline(option, number, axis) {
            /* 此处注意你的json是数组还是对象 */
            option[axis][0].axisLabel = {
                interval: 'auto',
                margin: 55, 
                textStyle: {
                    align: 'left'  // 文字左对齐
                },
                formatter: (params) => {
                    let newParamsName = '';
                    const paramsNameNumber = params.length;
                    const provideNumber = number;
                    const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (let p = 0; p < rowNumber; p++) {
                            let tempStr = '';
                            const start = p * provideNumber;
                            const end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + '\n';
                            }
                            newParamsName += tempStr;
                        }
                    } else {
                        newParamsName = params;
                    }
                    return newParamsName;
                }
            };
            return option;
        },

许多人使用echarts.js时候会出现数据名太长覆盖的情况,newline()这个方法,能够很好解决这种换行问题

2、使用方法请往下看↓↓↓

 this.chart = echarts.init(this.$refs.chart);
const option = {}
 const option1 = this.newline(option, 4, 'yAxis');
this.chart.setOption( option1 );

你可能感兴趣的:(echarts x/y轴坐标文字过长的解决办法(换行))