echarts柱状图的X轴label过长被重叠覆盖

文章目录x轴的刻度标签字符过长添加数据区域缩放dataZoom窗口resize变化时要重新计算渲染x轴的刻度标签字符过长渲染ecahrt柱状图时x轴标签很多导致正常渲染所有标签时标签会重复叠加在一块添加数据区域缩放dataZoom在图表的配置项options中添加dataZoom配置项constoptions{...dataZoom:[{type:slider,//滑动条类型show:true,height:10,//滑动条的高度bottom:20,//距离容器的距离start:0,//起始位置百分比及窗口起始位置所在的百分比//例如在超出渲染区域时首次想看到较为靠后的区域位置数据就可以设置为10、20等如果首次进来就要看到第一条的设置为0即可end:Math.min(100,2240/totalWidth*100),//这里2240是渲染区域的宽度按照实际数据写即可totalWidth是计算出的再不影响显示情况下渲染完所有的x轴标签需要用到的总宽度//end的值也可以计算得到end:endPercentage,xAxisIndex:[0],//dataZoom组件控制的x轴可以设置数组表示这个组件控制不同的轴设置数字时表示控制一个轴最好指定filterMode:filter,//内部设置轴的显示效果//属性值有filter、weakFilter、empty、none具体区别官网描述的很详细这里就不赘述了//还有很多其他的属性可以随需要进行添加}],...//x轴的标签放不下也可以给label设置旋转或者换行xAxis:{axisLabel:{...rotate:45,// 如果文字太长可以自动换行formatter:function(value){// 每8个字符换行可根据实际字体大小调整constmaxCharsPerLine8//可设置几个字符一换行if(value.lengthmaxCharsPerLine){constlines[]for(let i0;ivalue.length;imaxCharsPerLine){lines.push(value.substring(i,imaxCharsPerLine))}returnlines.join(\n)}returnvalue},}}}// 设置x轴每个类目的宽度constbarWidth100// 每个柱子的宽度constbarGap10// 柱子之间的间距//labelWidths是x轴要渲染的每个标签字符串所占宽度labels中的每个元素就是x轴的标签constlabelWidthsthis.labels.map(itemString(item).length*12)||[]// 重新计算totalWidthconsttotalWidthlabelWidths.reduce((sum,width,index){returnsumMath.max(width,barWidth)barGap},100)// 加上一些额外的间距// 获取当前容器宽度constcontainerWidththis.$refs.echartsRef?.clientWidth||2240// 计算结束位置百分比constendPercentageMath.min(100,(containerWidth/totalWidth)*100)窗口resize变化时要重新计算渲染//常用写法给window添加resize的事件监听,窗口大小变化时去重新渲染图表mounted(){window.addEventListener(resize,(){if(this.timer){clearTimeout(this.timer)}//添加个防抖this.timersetTimeout((){this.resizeEcharts()},200)})}beforeDestroy(){if(this.timer){clearTimeout(this.timer)this.timernull}window.removeEventListener(resize,this.resizeEcharts)},methods:{resizeEcharts(){//echartsInstace是初始化的图表实例//if(echartsInstace){// echartsInstace.resize()//}//上述是简易的改变图表尺寸//如果有缩放区域组件还要去更新dataZoomconstcontainerthis.$refs.echartRefconstnewWidthcontainer.clientWidth//现容器宽度// 只有当宽度真正变化时才更新,实际也相当于做了节流当宽度变化超过10时才重新渲染减少渲染次数// 只有当宽度真正变化时才更新if(Math.abs(newWidth-this.containerWidth)10){this.containerWidthnewWidth// 设置x轴每个类目的宽度constbarWidth100// 每个柱子的宽度constbarGap10// 柱子之间的间距//labelWidths是x轴要渲染的每个标签字符串所占宽度labels中的每个元素就是x轴的标签constlabelWidthsthis.labels.map(itemString(item).length*12)||[]// 重新计算totalWidthconsttotalWidthlabelWidths.reduce((sum,width,index){returnsumMath.max(width,barWidth)barGap},100)// 加上一些额外的间距// 计算结束位置百分比constendPercentageMath.min(100,(newWidth/totalWidth)*100)//更新dataZoomechartsInstace.dispatchAction({type:dataZoom,dataZoomIndex:0,start:0,end:endPercentage})// 调整图表大小echartsInstace.resize()}}以上是关于x轴label标签过多过长导致标签叠加显示的配置项设置如有问题或者有别的解决方案的欢迎大家评论指出~