当前位置: 首页 > Web前端 > HTML

echartsX轴数据太多怎么显示完整

时间:2023-03-28 16:34:00 HTML

x轴太多文字显示不完整解决办法如图1data:myChart:{},mounted:this.myChart()maChart:myChart(){constthat=this//基于Prepareddom,初始化echarts实例this.maChart=this.$echarts.init(document.getElementById('myChat'))//绘制图表this.maChart.setOption({title:{text:'销售总额'+this.totalSellCount},tooltip:{show:true},xAxis:[{type:'category',data:that.goodsName,axisLabel:{interval:0,rotate:"45",}}],yAxis:[{type:'value'}],grid:{//以笛卡尔坐标系绘制网格show:true,//是否显示笛卡尔坐标系网格[default:false]//left:"20%",//网格组件距离容器左侧的距离。//right:"30px",//borderColor:"",//gridbordercolorbottom:'35%'//},series:[{'name':'sales','type':'bar','data':that.goodsCount,itemStyle:{normal:{label:{show:true,//开启显示position:'top',//在顶部显示textStyle:{//valuestylecolor:'black',fontSize:16}}}}}]})},参考xAxis.axisLabel属性是坐标轴刻度标签的相关设置。更多相关配置见官网xAxis.axisLabel配置项(yAxis也有该属性)xAxis.axisLabel.interval:坐标轴刻度标签的显示间隔,在类目坐标轴中有效。默认情况下,标签以战略间隔显示,标签不重叠。(默认情况下,不会显示太多的文本)它可以设置为0以强制显示所有标签。设置1表示间隔显示一个标签,2表示间隔显示两个标签,以此类推。xAxis.axisLabel.rotate:刻度标签的旋转角度。当分类轴的分类标签显示不出来时,可以旋转防止标签重叠。旋转角度从-90度到90度。上面代码的结果是字符数少。上述方法仍然是一种可能的解决方案。2xAxis.axisLabel.formattermethodvaluecategoryindexindexaxisLabel:{interval:0,formatter:function(value){returnvalue.split("").join("\n");}}图中显示的结果仍然是不完整的两个单词和一个换行格式化器:function(params){varnewParamsName=''//最终拼接的字符串varparamsNameNumber=params.length//实际标签的个数varprovideNumber=2//每行可以显示的字数varrowNumber=Math.ceil(paramsNameNumber/provideNumber)//如果换行,需要显示多少行,四舍五入/***判断是否标签个数大于指定个数,大于则进行换行处理;if不大于,即等于或小于,返回原标签*///条件相当于rowNumber>1if(paramsNameNumber>provideNumber){/**循环每一行,p表示行*/for(varp=0;p