• echarts设置x轴的文字换行


    有时候文字长度过长,会导致某些值消失,所以设置换行能够解决

    xAxis : [
    		{
    			type : 'category',
    			data : [],
    			axisLabel: {
    				show: true,
    				textStyle: {
    					color: '#000000',
    					fontSize:'16'
    				}
    			},
    			axisLabel: { 
    				textStyle: {
    					color: '#7c8893',
    					fontSize: 14
    				},
    				interval: 0,  
    				formatter: function(params) {
    					var newParamsName = ""; // 最终拼接成的字符串
    					var paramsNameNumber = params.length; // 实际标签的个数
    					var provideNumber = 6; // 每行能显示的字的个数
    					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) + "
    ";
    							}
    							newParamsName += tempStr; // 最终拼成的字符串
    						}
    	
    					} else {
    						// 将旧标签的值赋给新标签
    						newParamsName = params;
    					}
    					//将最终的字符串返回
    					return newParamsName
    				}
    			},
    
    			axisTick: {
    				alignWithLabel: true
    			}
    		}
    	],
  • 相关阅读:
    [转自老马的文章]用MODI OCR 21种语言
    [转老马的文章]MODI中的OCR模块
    贴片晶振的脚位方向如何区分
    晶振简介及如何使用示波器测试晶振
    Lintcode 150.买卖股票的最佳时机 II
    Lintcode 82.落单的数
    Lintcode 97.二叉树的最大深度
    Lintcode 9.Fizz Buzz 问题
    LeetCode之461. Hamming Distance
    NYOJ之题目325 zb的生日
  • 原文地址:https://www.cnblogs.com/kingjordan/p/12026994.html
Copyright © 2020-2023  润新知