zoukankan      html  css  js  c++  java
  • 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
    			}
    		}
    	],
  • 相关阅读:
    Yii2 简单DateTimePicker
    Yii2简单的 yii2-phpexcel导出
    Yii2.0 是如何引入js和css
    Yii2.0 behaviors方法使用
    Yii2.0 Activeform表单部分组件使用方法
    Yii Url重新
    Yii CModel中rules验证规则
    Yii 1.0 伪静态即Yii配置Url重写(转)
    Yii main配置文件解析
    Yii框架 phpexcel 导出
  • 原文地址:https://www.cnblogs.com/kingjordan/p/12026994.html
Copyright © 2011-2022 走看看