版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caiyongshengCSDN/article/details/79625820
echart x轴文本过长的处理
1.换行
axisLabel和tooltip都设置换行。
tooltip提示框本身不支持换行，所以通过formatter返回一个div来设置样式，从而使其支持换行，但效果不太好，其他的也会受影响；
testBarOption1 = { tooltip : { trigger: 'axis', padding: 10, formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params[0].name.length;// 文字的个数 var provideNumber = 10;// 每行能显示的字的个数 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整 var data =''; $.each(params,function (index,item) { data += item.seriesName + ' : ' + item.value + '</br>' }); /** * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签 */ // 条件等同于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[0].name.substring(start, paramsNameNumber); } else { // 每一次拼接字符串并换行 tempStr = params[0].name.substring(start, end) + "\n"; } // 每一次拼接字符串并换行 newParamsName += tempStr;// 最终拼成的字符串 } } else { // 将旧标签的值赋给新标签 newParamsName = params[0].name; } //将最终的字符串返回 // return newParamsName +'</br>' + data; return `<div class="toolDiv" style="white-space: normal;">${newParamsName +'</br>' + data}</div>` } }, calculable : true, legend: { x:'right', data:['类型A','类型B','平均值'] }, grid: { x: 40, x2: 10, // y: 50, // y2: 40, borderWidth: '1' }, dataZoom: { //滚动条 show: true, y: 300, // realtime: true, start: 0, end: 70, height: 14, handleColor: '#1a8edc', handleSize: 5, fillerColor: '#a5cdea' }, xAxis : [ { type : 'category', axisLine: { //坐标轴 show:true, lineStyle: { width: 2, color: '#d9d9d9' } }, splitLine:{ show:false }, axisTick: { //刻度 lineStyle: { width: 2, color: '#d9d9d9' } }, axisLabel: { textStyle: { color: '#999' // baseline: 'middle' }, interval: 0, //文字全部显示 formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params.length;// 文字的个数 var provideNumber = 10;// 每行能显示的字的个数 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 } }, data :['结构工程','基坑防护','土石方','地下连续墙','地基处理','防水工程','措施工程措施工程措施工程措施工程','其他','供电','区间','车站辅助设备'] } ], yAxis : [ { type : 'value', // name : '收入', nameTextStyle: { color: '#333' }, axisLine: { //坐标轴 show:true, lineStyle: { width: 2, color: '#d9d9d9' } }, splitLine: { //背景网格线 show:false, lineStyle: { color: '#f5f5f5', width: 1 } }, axisTick: { //刻度 show: false }, axisLabel:{ formatter: '{value}', textStyle: { color: '#999' } }, splitArea:{ //背景区域 show:true, areaStyle:{ color:['#edf2f6','#fff'] } } }, { //曲线 type : 'value', // name : '温度', axisLine:{ show:false }, axisLabel : { show:false }, splitLine:{ show:false } } ], series : [ { name:'类型A', type:'bar', // barWidth:30, barGap: 10, //两柱子距离 barCategoryGap: barCategoryGap, itemStyle: {normal:{color:'#8779e8'/*,barBorderRadius:[15,15,0,0]},emphasis:{barBorderRadius:[15,15,0,0]*/}}, data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4] }, { name:'类型B', type:'bar', // barWidth:30, barGap: 10, //两柱子距离 barCategoryGap: barCategoryGap, itemStyle: {normal:{color:'#c394e5'/*,barBorderRadius:[15,15,0,0]},emphasis:{barBorderRadius:[15,15,0,0]*/}}, data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0] }, { name:'平均值', type:'line', scale: true, symbol: 'emptyCircle', //圆点样式 symbolSize:3, smooth: true, splitLine: { lineStyle: { color: '#f26078', //曲线颜色 width: 1 } }, yAxisIndex: 1, data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0] } ] };
效果：
以上tooltip里文字长的处理并没有生效，单纯只是div的作用，而且其他靠近边缘的也换行了，所以效果不好。
2.axisLabel设置换行（同上），tooltip设置成省略号。
tooltip : { trigger: 'axis', padding: 10, formatter: function(datas) { var data =''; $.each(datas,function (index,item) { data += item.seriesName + ' : ' + item.value + '</br>' }); if (datas[0].name.length > 5) { return datas[0].name.substring(0, 6) + '...'+'</br>' + data; } else { return datas[0].name +'</br>' + data; } } },
效果：
3.axisLabel设置成省略号，tooltip不理它。
xAxis : [ { type : 'category', axisLine: { //坐标轴 show:true, lineStyle: { width: 2, color: '#d9d9d9' } }, splitLine:{ show:false }, axisTick: { //刻度 lineStyle: { width: 2, color: '#d9d9d9' } }, axisLabel: { textStyle: { color: '#999' // baseline: 'middle' }, interval: 0, //文字全部显示 formatter: function(val) { if (val.length > 5) { return val.substring(0, 6) + '...'; } else { return val; } } data :['结构工程','基坑防护','土石方','地下连续墙','地基处理','防水工程','措施工程措施工程措施工程措施工程','其他','供电','区间','车站辅助设备'] } ],
效果：