echarts图标X轴标签文字过多， 导致显示不全~

问题：echarts柱状图X轴标签显示不全（标签文字过多导致）， 但是当前内容是存在的，只是标签不显示

        小故事：本以为问题不大，只要空间足够大，标签就会显示完整，屏幕适配的问题；但是甲方测试的时候发现并提出来，心里很不开心， 呜呜呜~

解决之路：

        (1)：echarts官网粗略看了一遍，并没有发现解决之法（因为之前写的时候显示不全，也尽全力在官网中翻了一遍，调了几个参数， 并没有效果）

     （2）：强制改变X轴标签的font-size,改为最小， 官网找改变标签font-size的方法， 找到了

xAxis: {
						 type: 'category',
						data: levelTitle,
						axisLabel: {
							show: true,
							textStyle: {
								fontSize: '12'
							}
						}
					},

并没用。。。。

      （3）：向甲方解释原因：解决不了emmmmmmmm；甲方：水平滚动或者分页；

                  你。。。此处省略100000字（一顿拳打脚踢）

        (4）：继续扒官网

看到了这个，咦。。。。。确实会水平滚动， 一眼看到属性【dataZoom】, 几个属性调了半天，还是不行，一上午过去了。。。。，下午再战，午觉都没睡，呜呜呜~

缩短柱子之间的间距， barWidth, barCategoryGap, barGap配合dataZoom， 调呀调，不行不行还是不行；

什么倾斜 rotate ， 文字竖着显示，不想采纳（感觉不好看）；

然后百度随意点了一片文章：

 xAxis: {
                        type: 'category',
                        data: taskName,
						axisLabel: {
							interval: 0,
							show: true,
							textStyle: {
								fontSize: '12'
							},
						}
                    },

配置了一下interval，咦，，，，好使， 接着formatter

xAxis: {
                        type: 'category',
                        data: taskName,
						axisLabel: {
							interval: 0,
							show: true,
							textStyle: {
								fontSize: '12'
							},
							formatter: function (params) {
								let newParamsName = '';
								const paramsNameNumber = params.length; // 文字总长度
								const provideNumber = 4; //一行显示几个字
								const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
								for (let p = 0; p < rowNumber; p++) {
									const start = p * provideNumber;
									const end = start + provideNumber;
									const tempStr = p === rowNumber - 1 ? params.substring(start, paramsNameNumber) : params.substring(start, end) + '\n';
									newParamsName += tempStr;
								}
								} else {
								newParamsName = params;
								}
								return newParamsName;
							},
						}
                    },

咦。。。也好使，哈哈哈哈，开心了

查看官网interval

啪啪打脸。。。

数据太多显示的太过拥挤， dataZoom出场了， 又经过一段时间的挣扎，配置出现了这个

dataZoom: 
					{
						type: 'inside',
						// 数据窗口范围的起始数值
						startValue: 0,
						// 数据窗口范围的结束数值（一页显示多少条数据）
						endValue: 7,
						// minSpan:100,
						// maxSpan: 50,
					},

终于ok啦，阿拉啦啦啦~

以此记录~

完整代码：

{
					title: {
                        text: `各任务完成人数`,
                    },
                    grid: {
                        top: '40px'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: taskName,
						axisLabel: {
							interval: 0,
							show: true,
							textStyle: {
								fontSize: '12'
							},
							formatter: function (params) {
								let newParamsName = '';
								const paramsNameNumber = params.length; // 文字总长度
								const provideNumber = 4; //一行显示几个字
								const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
								for (let p = 0; p < rowNumber; p++) {
									const start = p * provideNumber;
									const end = start + provideNumber;
									const tempStr = p === rowNumber - 1 ? params.substring(start, paramsNameNumber) : params.substring(start, end) + '\n';
									newParamsName += tempStr;
								}
								} else {
								newParamsName = params;
								}
								return newParamsName;
							},
						}
                    },
					dataZoom: 
					{
						type: 'inside',
						// 数据窗口范围的起始数值
						startValue: 0,
						// 数据窗口范围的结束数值（一页显示多少条数据）
						endValue: 7,
						// minSpan:100,
						// maxSpan: 50,
					},
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
						name:'完成人数',
                        data:joinTaskNum,
                        type: 'bar',
						barWidth: '30%',
						// 调整柱状图之间的间隔
						barCategoryGap: '20%',
						// 调整同一系列中柱状图之间的间隔
						// barGap: '20%'
                    }]
				}