在 ECharts 图表中控制纵坐标的小数位数,可以通过设置 yAxis.axisLabel.formatter 属性来实现保留2位小数并加上单位%,而且数值不能相同
时间: 2024-04-15 20:28:51 浏览: 113
要在 ECharts 图表中控制纵坐标的小数位数,并添加单位%,可以通过设置 yAxis.axisLabel.formatter 属性来实现。为了确保数值不相同,您可以在 formatter 函数内部进行额外的处理。
以下是一个示例代码:
```javascript
// 假设有一个名为 chart 的 ECharts 实例
chart.setOption({
yAxis: {
axisLabel: {
formatter: function (value) {
// 保留两位小数
var formattedValue = value.toFixed(2);
// 添加单位%
formattedValue += "%";
// 处理数值相同的情况
if (this.scale && this.scale.hasOwnProperty(formattedValue)) {
var idx = this.scale[formattedValue] + 1;
formattedValue += " (" + idx + ")";
this.scale[formattedValue] = idx;
} else {
this.scale = {};
this.scale[formattedValue] = 0;
}
return formattedValue;
}
}
},
// 其他配置项...
});
```
在这个示例中,通过设置 yAxis.axisLabel.formatter 属性为一个函数。在函数内部,首先使用 toFixed(2) 方法将 value 保留两位小数,并将结果赋给 formattedValue。然后,通过 += 运算符将单位%添加到 formattedValue 的末尾。
为了确保数值不相同,我们使用一个名为 scale 的对象来跟踪已经出现的数值。如果当前的 formattedValue 已经在 scale 对象中存在,则说明该数值已经出现过,需要进行处理。我们将数值后面添加一个序号,表示第几次出现该数值。如果 formattedValue 是第一次出现,则将其添加到 scale 对象,并将序号设置为 0。
最后,返回 formattedValue 作为纵坐标的标签显示。
请注意,这只会影响坐标轴上的标签显示,不会改变实际的数据值。如果需要改变数据值本身的小数位数、单位等,请在数据处理阶段进行相应的处理。
阅读全文