总结echarts使用中的小问题_echarts横向柱状图数字超出-优快云博客

本文链接：https://blog.youkuaiyun.com/h_bugwriters/article/details/103743616

本文提供了ECharts图表的多项优化方案，包括解决柱形图超出x轴、Y轴数值显示过大、布尔值与数值混存、浮动框超出边界及变量过多导致的拥挤问题。通过调整yAxis配置、使用自定义数值格式化、设置最小间隔和浮动框限制，以及采用滚动legend，有效提升图表的可读性和美观度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 柱形图超出向下超出x轴

解决办法：

yAxis:{
min: 0
}

2. Y轴数值过大超出边界

(折线或柱状图)解决办法

//保留两位小数 
Preserve2: function(a) {
                   if(parseInt(a)){
		
		var x = String(a).indexOf('.') + 1; //小数点的位置
		var y = String(a).length - x; //小数的位数

		if (y > 2) {
			return Math.floor(a * 100) / 100;
			// return a.toFixed(2)
		} else {
			return a;
		}
	} else {
		return a;
	}
}
// 初始化前
let that = this;


//  
yAxis: {
axisLabel: {
	 formatter: function (value, index) { 
		    var a = value/10000
			if(a>1||a==1){
			    // 调用外部方法保留两位小数
				a = that.Preserve2(a)
			 	return  a + "w"
			}else{
			    // 小于一万不做处理
				return value
			}  
	  }
}

3. 解决布尔值和大于1的值共存问题

(柱形和折线图)解决办法
设置y轴最小间隔为1

yAxis: {
	 minInterval: 1
 }

4.解决浮动框超出问题

解决办法

tooltip: {
	confine: true
}

5.解决变量过多问题(即legend.data的length比较大造成挤压和覆盖)

解决办法(让legend可以滚动)

legend: {
	type: 'scroll',
	// orient: 'vertical',
	left: 20,
	right: 20,
	top: 20,
	bottom: 230,// 滚动区域距离底部的距离
	data: [] //变量名
}