[Feature] Better integration of time axis and axisPointer label formatter
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### What problem does this feature solve?
I use `time` axes. My datasets usually have a granularity of days. When there are only few entries in a dataset, the default axisPointer label [apparently](https://github.com/apache/echarts/blob/fc6656f12ce75d02bc53807532d72168fce372b9/src/scale/Time.ts#L129) chooses the [`second`](https://github.com/apache/echarts/blob/fc6656f12ce75d02bc53807532d72168fce372b9/src/util/time.ts#L52) formatter for lack of a better range. That suggests to the viewer a higher granularity in the data than is actually present.
You currently have very nice functionality to specify the formatting of dates for axis ticks in [`axisLabel.formatter`](https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter). It would be great if there was a string-formatter way to use that syntax for the `axisPointer.label.formatter` as well.
As it stands I think I would have to write a custom-code formatter to call `TimeScale.getFormattedLabel()` myself.
### What does the proposed API look like?
From a cursory glance through the source I think there are several ways to go about implementing somthing of sorts. Minimally, I think I might be satisfied with being able to ~~specify the default granularity of the `TimeScale`:~~ have `precision` percolate appropriately:
```ts
//...
getLabel(tick: TimeScaleTick, opt?: {precision?: string}): string {
const useUTC = this.getSetting('useUTC');
const chosenFormat = opt?.precision || getDefaultFormatPrecisionOfInterval(getPrimaryTimeUnit(this._minLevelUnit));
return format(
tick.value,
fullLeveledFormatter[chosenFormat] || fullLeveledFormatter.second,
useUTC,
this.getSetting('locale')
);
}
```
leading to
```js
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
precision: "day"
}
}
},
xAxis: {
type: 'time',
},
//...
}
```
Ideally I could just use `leveledFormat()` syntax in the `axisPointer.label.formatter`, if the triggering axis was a time axis:
```js
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
formatter: "{yyyy}-{MM}-{dd}"
}
}
},
xAxis: {
type: 'time',
},
//...
}
```
Couldn't that be achieved by using [`makeLabelFormatter`](https://github.com/apache/echarts/blob/fc6656f12ce75d02bc53807532d72168fce372b9/src/coord/axisHelper.ts#L233) in [`getValueLabel`](https://github.com/apache/echarts/blob/fc6656f12ce75d02bc53807532d72168fce372b9/src/component/axisPointer/viewHelper.ts#L147), that seems to cover most of the functionality anyway?
Contributor guide
Assessment
This issue has not been assessed yet.