echarts名字处理,换行、倾斜、竖排显示

名字太长换行处理

              yAxis: {
                        type: 'category',
                        data: ['水罐消防车', '泡沫消防车', '压缩空气泡沫消防车', '举高喷射消防车', '干粉消防车'],
                        axisLabel: {
                            interval: 0,
                            align:'right',
                            formatter : function(params){
                                var newParamsName = "";// 最终拼接成的字符串
                                var paramsNameNumber = params.length;// 实际标签的个数
                                var provideNumber = 5;// 每行能显示的字的个数
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话,需要显示几行,向上取整
                                /**
                                 * 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
                                 */
                                // 条件等同于rowNumber>1
                                if (paramsNameNumber > provideNumber) {
                                    /** 循环每一行,p表示行 */
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";// 表示每一次截取的字符串
                                        var start = p * provideNumber;// 开始截取的位置
                                        var 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
                            }
                        },
                    },

 

名字竖排显示

           xAxis: {
                        axisLabel:{
                            interval: 0,
                            formatter: function (value) {
                                //x轴的文字改为竖版显示
                                var str = value.split("");
                                return str.join("\n");
                            },
                            textStyle: {
                                color: '#666666' //color of value
                            }
                        },
                        type: 'category',
                        data: ['玄武区','秦淮区','建邺区','鼓楼区','浦口区','栖霞区','雨花台区','江宁区','六合区','溧水区','高淳区']
                    },

 

 文字倾斜处理

             xAxis: {
                        axisLabel:{
                            interval: 0,      //必须带的属性
                            rotate:270       //倾斜角度
                        },
                        type: 'category',
                        data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00'
                            , '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
                    },

 

posted @ 2020-08-28 12:09  bingyingks  阅读(1519)  评论(0)    收藏  举报