目录
[方法 1：强制显示最小值标签](#方法 1：强制显示最小值标签)
[方法 2：精确控制刻度间隔](#方法 2：精确控制刻度间隔)
[方法 3：动态刻度间隔思路](#方法 3：动态刻度间隔思路)
提出问题
我们在ECharts中设置y轴的最小值（min）为110，但图表上显示的最小刻度是从111开始的，而不是110。
这通常是因为ECharts默认的刻度分割策略导致的，它会自动计算一个看起来比较合理的刻度间隔，从而可能跳过设定的最小值。
查看原代码及原效果
原配置：
javascript
yAxis: {
type: "value",
min: 110,
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.2)",
},
},
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: "#fff",
fontSize: 14,
},
name: "单位(m)",
nameTextStyle: {
color: "#fff",
fontSize: 14,
padding: [0, 0, 10, -10],
},
},原效果：
下面出现了两个线条，并且应该显示的是min：110，而不是111开始，肯定是不行的。
要解决 ECharts 中 y 轴设置
min:110但实际显示从 111 开始的问题。思考：
1.可以尝试设置`min`的同时，通过设置`interval`（刻度间隔）来强制刻度从最小值开始。
或者，使用`boundaryGap`设置为false，但注意这个属性在y轴上通常用于类目轴（category），对于数值轴（value）可能不适用。
2.另一种方法是设置`alignTicks`，但更直接的是通过指定`interval`和确保`min`和`max`能够被分割间隔整除。
例如，如果我们的数据范围较小，我们可以设置一个合适的间隔（比如1），这样110就会作为一个刻度出现。
3.也可以尝试通过设置`min`和`max`，并强制指定一个分割间隔，使得110成为刻度点。
另外，ECharts还提供了一个属性`minInterval`和`maxInterval`来控制间隔
4.还有一种方法是使用`axisLabel`的`formatter`来强制显示110，但他不能改变刻度线的位置。
解决方案
方法 1：强制显示最小值标签
在axisLabel中添加showMinLabel：true。但是原计算逻辑回出现111的线
javascript
yAxis: {
type: 'value',
min: 110,
axisLabel: {
showMinLabel: true, // 强制显示最小值的标签
// showMaxLabel: true // 强制显示最大值的标签
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
}效果：
方法 2：精确控制刻度间隔
添加 interval设置固定刻度间隔，我的数据最大为126，最小为110，我设置的是4，我的数据是死的，这个并不会出现上面方法1中多出来的横线
javascript
yAxis: {
type: 'value',
min: 110,
interval: 4, // 固定刻度间隔为 4（根据实际数据范围调整）
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
}效果：
方法 3：动态刻度间隔思路
动态设置最大值和刻度，但是最大值可以使用图表自带的，其实只要计算合适的刻度就可以了。
公式：
1.确定y轴的最大值（可以来自数据，也可以手动设定）
2.计算差值 = 最大值 - 110
3.设定目标分段数（比如5段），则间隔interval = 差值 / 分段数
javascript
function adjustToNiceInterval(interval) {
// 将间隔调整到一个合适的数字（例如1,2,5,10,20,50,100等）
const exponent = Math.floor(Math.log10(interval)); // 10的幂
const fraction = interval / Math.pow(10, exponent);
let niceFraction;
// 将fraction调整到1,2,5,10这几个数附近
if (fraction < 1.5) {
niceFraction = 1;
} else if (fraction < 3) {
niceFraction = 2;
} else if (fraction < 7) {
niceFraction = 5;
} else {
niceFraction = 10;
}
return niceFraction * Math.pow(10, exponent);
}
function getNiceInterval(min, max, segmentCount) {
let interval = (max - min) / segmentCount;
// ... 使用上面的adjustToNiceInterval函数
return adjustToNiceInterval(interval);
}
// 在准备yAxis配置时
const min = 110;
const maxValue = Math.max(...dataSeries); // 假设dataSeries是数据数组
const segmentCount = 5;
const interval = getNiceInterval(min, maxValue, segmentCount);
const max = min + Math.ceil((maxValue - min) / interval) * interval;
option.yAxis = {
type: 'value',
min: min,
max: max, // 可选，如果不设置则ECharts自动扩展
interval: interval,
// ...其他配置
};显示数据标签：
原配置的series添加label设置数据标签配置
javascript
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50],
label: { // 数据标签配置
show: true, // 显示标签
position: 'top', // 标签位置，如'top','inside','right'等
formatter: '{c}' // 标签内容格式器，{c}表示数据值
}
}]常见配置项：
`show`: 是否显示标签。
`position`: 标签的位置，不同的图表类型有不同的位置选项。
`formatter`: 标签内容的格式化器，支持字符串模板和回调函数。
字符串模板：如`'{a}'`、`'{b}'`、`'{c}'`，分别代表系列名、数据名、数据值。
回调函数：`function(params) { return ... }`
另外，在饼图中，数据标签还可以显示百分比等。
修改数据标签颜色：
文字主要通过textStyle改变，itemStyle是改变bar的样式，目前的是渐变🐍。
javascript
{
name: "xxx",
type: "bar",
data: [122.6, 124.4, 125.08, 124.99],
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(0, 255, 241, 0)" },
{ offset: 1, color: "#00FFF1" },
]),
},
label: {
show: true,
position: "top",
// formatter: function (params: any) {
// return `${params.value.toFixed(2)}`;
// },
textStyle: { //文字样式
color: "#FFFFFF",
fontSize: 12,
},
},
},效果：
-------------完------------