Open
Description
What problem does this feature solve?
Hi Echarts team,
I want to have a KMB style yAxis label formatter for large numeric label values. Eg: "100M" for "100,000,000".
Current style:
Demo Link
Expected Style
Currently, there is option yAxis.axisLabel.formatter to customize yAxis labels. We can provide a callback function to customize label. However, this callback function lacks some important information. I need at least Axis min value, max value to determine whether to show as K or M or B.
What does the proposed API look like?
else if (zrUtil.isFunction(labelFormatter)) {
return (function (cb) {
return function (tick: ScaleTick, idx: number) {
// The original intention of `idx` is "the index of the tick in all ticks".
// But the previous implementation of category axis do not consider the
// `axisLabel.interval`, which cause that, for example, the `interval` is
// `1`, then the ticks "name5", "name7", "name9" are displayed, where the
// corresponding `idx` are `0`, `2`, `4`, but not `0`, `1`, `2`. So we keep
// the definition here for back compatibility.
if (categoryTickStart != null) {
idx = tick.value - categoryTickStart;
}
return cb(
getAxisRawValue(axis, tick) as number,
idx,
(tick as TimeScaleTick).level != null ? {
level: (tick as TimeScaleTick).level
} : null,
// ADDED INFORMATION, MIN AND MAX VALUE
// ADDED INFORMATION, MIN AND MAX VALUE
// ADDED INFORMATION, MIN AND MAX VALUE
{ min: axisMinValue, max: axisMaxValue },
);
};
})(labelFormatter as (...args: any[]) => string);
}Another proposal:
// Use string template; template variable is the default label of axis {value}
formatter: '{value} kg'
// Use callback.
formatter: function (value, index) {
return value + 'kg';
}
// Use predefined KMB style
formatter: "KMB-Style"