echart横坐标太长导致坐标显示不完全

最新推荐文章于 2024-08-09 13:16:42 发布

原创最新推荐文章于 2024-08-09 13:16:42 发布 · 1.6w 阅读

0 ·

CC 4.0 BY-SA版权

其他专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何在ECharts中自定义xAxis轴标签的显示方式，包括设置显示状态、间隔、旋转角度和边距等属性，通过实例演示了具体实现过程。

在xAxis中加入
 axisLabel : {
                show:true,
                interval: 0//,    // {number}
                //rotate: 45,
               // margin: 8
               
            } 
如下所示

exports.createLine=function(id,xdata,ydata,xName,yName){
		var option = {
			    tooltip : {
			        trigger: 'axis'
			    },  grid:{
		   			x:'15%',
		     		y:30,
		     		x2:30,
		     		y2:30
		        },
			    dataZoom : {
			        show : false,
			        start : 0,
			        end : 100
			    },
			    xAxis : [
			        {
			            type : 'category',
			            boundaryGap : true,
			            data : (function (){
			                var now = new Date();
			                var res = [];
			                var len = xdata.length;
			                while (len--) {
			                    res.push(xdata[len]);
			                }
			                return res;
			            })(),
			            axisLabel : {
			                show:true,
			                interval: 0
			            } 
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            scale: true,
			            data:[0,25,50,75,100]
			        }
			    ],
			    series : [
			        {
			            name:yName,
			            type:'line',
			            data:(function (){
			                var res = [];
			                var len = ydata.length;
			                while (len--) {
			                    res.push(ydata[len]);
			                }
			                return res;
			            })()
			        }
			    ]
			};
		var myChart = echarts.init(id);
		myChart.setOption(option);
	}