Echarts的Y轴字太长换行显示或使用省略号显示一部分

 换行显示重点代码：

axisLabel: {  /*****重点还是在这里哦**///
			textStyle: {
				color: '#7c8893',
				fontSize: 12
			},
			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) + "\n";
						}
						newParamsName += tempStr; // 最终拼成的字符串
					}
 
				} else {
					// 将旧标签的值赋给新标签
					newParamsName = params;
				}
				//将最终的字符串返回
				return newParamsName
			}
		},

使用省略号重点代码：

 axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                },
                interval: 0,
                //设置字数限制
                formatter: function(value) {
                  if (value.length > 8) {
                    return value.substring(0, 8) + "...";
                  } else {
                    return value;
                  }
                }
            },

function line(areaData) {
		var line = echarts.init(document.getElementById('line'));
		option = {
			legend: {
				data: ['已检测', '未检测'],
				top: '0%',
				textStyle: {
					color: 'rgba(250,250,250,1)',
					fontSize: 16,
				},
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
				},
			},
			grid: {
				left: '0%',
				right: '0%',
				top: '3%',
				bottom: 0,
				containLabel: true
			},
			barWidth: 12,
			xAxis: {
				type: 'value',
				splitLine: {
					lineStyle: {
						color: 'rgba(255,255,255,0.2)',
					},
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					//  改变x轴颜色
					lineStyle: {
						color: '#26D9FF',
					},
				},
				axisLabel: {
					//  改变x轴字体颜色和大小
					textStyle: {
						color: 'rgba(250,250,250,0.8)',
						fontSize: 16,
					},
				},
			},
			yAxis: {
			show: true,
				type: 'category',
<!--				 max : 31,-->
<!--				min : 0,-->
<!--            	splitNumber : 1,-->
<!--				data: ['叩官镇', '汪湖镇', '洪凝街道', '高泽镇', '许孟镇', '街头镇', '石场乡', '潮河镇', '于里镇', '中至镇'],-->
<!--				data: ['松柏','户部','石场镇', '高泽镇', '叩官镇', '汪湖镇', '于里镇', '许孟镇', '潮河乡', '街头镇', '洪凝街道', '中至镇'],-->
				data: areaData.label,

				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					//改变y轴颜色
					lineStyle: {
						color: '#26D9FF',
					},
				},
				axisLabel: {
				 show: true,
					//改变y轴字体颜色和大小
					textStyle: {
						color: 'rgba(250,250,250,0.8)',
						fontSize: 16,
					},
					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) + "\n";
						}
						newParamsName += tempStr; // 最终拼成的字符串
					}

				} else {
					// 将旧标签的值赋给新标签
					newParamsName = params;
				}
				//将最终的字符串返回
				return newParamsName
			}
				},
			},
			series: [{
				type: 'bar',
				name: '已检测',
				itemStyle: {
					normal: {
						label: {
							show: false, //开启显示
							position: 'right', //在上方显示
							textStyle: {
								//数值样式
								color: 'rgba(250,250,250,0.6)',
								fontSize: 16,
								fontWeight: 600,
							},
						},
						color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
							offset: 0,
							color: 'rgba(4, 139, 240, 1)',
						}, {
							offset: 1,
							color: 'rgba(39, 215, 232, 1)',
						}, ]),
						borderWidth: 2,
						barBorderRadius: 0,
					},
				},
<!--				data: [19, 29, 39, 81, 56, 81, 56, 29, 39, 81],-->
<!--				data: [bigData.songbai1, bigData.hubu1, bigData.shichang1,bigData.gaoze1,bigData.kouguan1, bigData.wanghu1, bigData.yuli1, bigData.xumeng1, bigData.chaohe1, bigData.jietou1, bigData.hongning1, bigData.zhongzhi1],-->
				data: areaData.dataY ,

			}, {
				type: 'bar',
				name: '未检测',
				itemStyle: {
					normal: {
						label: {
							show: false, //开启显示
							position: 'right', //在上方显示
							textStyle: {
								//数值样式
								color: 'rgba(250,250,250,0.6)',
								fontSize: 16,
								fontWeight: 600,
							},
						},
						color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
							offset: 0,
							color: 'rgba(255, 91, 31, 1)',
						}, {
							offset: 1,
							color: 'rgba(255, 194, 31, 1)',
						}, ]),
						borderWidth: 2,
						barBorderRadius: 0,
					},
				},
<!--				data: [12, 23, 35, 100, 45, 23, 35, 100, 45, 35],-->
<!--					data: [bigData.kouguan2, bigData.wanghu2, bigData.yuli2, bigData.xumeng2, bigData.chaohe2, bigData.jietou2, bigData.hongning2, bigData.zhongzhi2],-->
<!--					data: [bigData.songbai2, bigData.hubu2, bigData.shichang2,bigData.gaoze2,bigData.kouguan2, bigData.wanghu2, bigData.yuli2, bigData.xumeng2, bigData.chaohe2, bigData.jietou2, bigData.hongning2, bigData.zhongzhi2],-->
					data: areaData.dataN,

			}, ],
<!--			dataZoom: {-->
<!--				show: true,-->
<!--				realtime: true,-->
<!--				y: 36,-->
<!--				height: 20,-->
<!--				start: 20,-->
<!--				end: 80-->
<!--			}-->

		};
		line.setOption(option);
	}