ECharts time format 格式化时间工具类
ECharts About 6,891 wordstime.format
将时间戳、时间字符串、Date类型格式化为指定模板的字符串。
echarts.time.format(time: number | string | Date, template: string, isUTC: boolean, lang?: string | Model<LocaleOption>)
使用
示例一
echarts.time.format(new Date, '{yyyy}-{MM}-{dd}', false);
示例二
echarts.time.format(1767679030242, '{yyyy}/{MM}', false);
示例三
echarts.time.format('2012-03-01', '{MMMM}', true, 'ZH');
参数
time
Date类型UTC时间戳ISO 8601子集- 只有年月日的字符串
- '2012-03'
- '2012-03-01'
- '2012-03-01 05'
- '2012-03-01 05:06'
T或空格隔开的字符串- '2012-03-01T12:22:33.123'
- '2012-03-01 12:22:33.123'
- 带时区的字符串
- '2012-03-01T12:22:33Z'
- '2012-03-01T12:22:33+8000'
- '2012-03-01T12:22:33-05:00'
- 只有年月日的字符串
- 其他字符串
- '2012'
- '2012-3'
- '2012-3-1'
- '2012/3/1'
- '2012/03/01'
- '2009/6/12 2:00'
- '2009/6/12 2:05:08'
- '2009/6/12 2:05:08.123'
没有带时区的字符串都将实用本地时区。
不合法的参数将返回new Date(NaN)，也是Date对象，但其getFullYear、getTime等方法都返回NaN。
template
时间模板：注意需带**{}**大括号，{yyyy}-{MM}-{dd}、 {yy}/{MM}/{dd} {HH}:{mm}:{ss}等。
特别几个模板含义：
{MMMM}：返回月份，数字为中文，如：三月{MMM}：返回月份，数字为阿拉伯数字，如：3月{eeee}：返回星期几，如：星期六{ee}：返回星期几中的数字部分，中文的数字，如：六、日{e}：返回星期几中的数字部分，阿拉伯的数字，如：6、0（对应星期日）
isUTC
传入的第一个参数time是否是UTC时间。
lang
本地化Locale，如：ZH。
langEN.ts、langZH.ts，所以lang参数就取EN、ZH这些值。
更多语言请参考：https://github.com/apache/echarts/tree/master/src/i18n
源码
time.ts
export function format(
// Note: The result based on `isUTC` are totally different, which can not be just simply
// substituted by the result without `isUTC`. So we make the param `isUTC` mandatory.
time: unknown, template: string, isUTC: boolean, lang?: string | Model<LocaleOption>
): string {
const date = numberUtil.parseDate(time);
const y = date[fullYearGetterName(isUTC)]();
const M = date[monthGetterName(isUTC)]() + 1;
const q = Math.floor((M - 1) / 3) + 1;
const d = date[dateGetterName(isUTC)]();
const e = date['get' + (isUTC ? 'UTC' : '') + 'Day' as 'getDay' | 'getUTCDay']();
const H = date[hoursGetterName(isUTC)]();
const h = (H - 1) % 12 + 1;
const m = date[minutesGetterName(isUTC)]();
const s = date[secondsGetterName(isUTC)]();
const S = date[millisecondsGetterName(isUTC)]();
const a = H >= 12 ? 'pm' : 'am';
const A = a.toUpperCase();
const localeModel = lang instanceof Model ? lang
: getLocaleModel(lang || SYSTEM_LANG) || getDefaultLocaleModel();
const timeModel = localeModel.getModel('time');
const month = timeModel.get('month');
const monthAbbr = timeModel.get('monthAbbr');
const dayOfWeek = timeModel.get('dayOfWeek');
const dayOfWeekAbbr = timeModel.get('dayOfWeekAbbr');
return (template || '')
.replace(/{a}/g, a + '')
.replace(/{A}/g, A + '')
.replace(/{yyyy}/g, y + '')
.replace(/{yy}/g, pad(y % 100 + '', 2))
.replace(/{Q}/g, q + '')
.replace(/{MMMM}/g, month[M - 1])
.replace(/{MMM}/g, monthAbbr[M - 1])
.replace(/{MM}/g, pad(M, 2))
.replace(/{M}/g, M + '')
.replace(/{dd}/g, pad(d, 2))
.replace(/{d}/g, d + '')
.replace(/{eeee}/g, dayOfWeek[e])
.replace(/{ee}/g, dayOfWeekAbbr[e])
.replace(/{e}/g, e + '')
.replace(/{HH}/g, pad(H, 2))
.replace(/{H}/g, H + '')
.replace(/{hh}/g, pad(h + '', 2))
.replace(/{h}/g, h + '')
.replace(/{mm}/g, pad(m, 2))
.replace(/{m}/g, m + '')
.replace(/{ss}/g, pad(s, 2))
.replace(/{s}/g, s + '')
.replace(/{SSS}/g, pad(S, 3))
.replace(/{S}/g, S + '');
}
number.ts
/**
* @param value valid type: number | string | Date, otherwise return `new Date(NaN)`
* These values can be accepted:
* + An instance of Date, represent a time in its own time zone.
* + Or string in a subset of ISO 8601, only including:
* + only year, month, date: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06',
* + separated with T or space: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123',
* + time zone: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00',
* all of which will be treated as local time if time zone is not specified
* (see <https://momentjs.com/>).
* + Or other string format, including (all of which will be treated as local time):
* '2012', '2012-3-1', '2012/3/1', '2012/03/01',
* '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'
* + a timestamp, which represent a time in UTC.
* @return date Never be null/undefined. If invalid, return `new Date(NaN)`.
*/
export function parseDate(value: unknown): Date {
if (value instanceof Date) {
return value;
}
else if (zrUtil.isString(value)) {
// Different browsers parse date in different way, so we parse it manually.
// Some other issues:
// new Date('1970-01-01') is UTC,
// new Date('1970/01/01') and new Date('1970-1-01') is local.
// See issue #3623
const match = TIME_REG.exec(value);
if (!match) {
// return Invalid Date.
return new Date(NaN);
}
// Use local time when no timezone offset is specified.
if (!match[8]) {
// match[n] can only be string or undefined.
// But take care of '12' + 1 => '121'.
return new Date(
+match[1],
+(match[2] || 1) - 1,
+match[3] || 1,
+match[4] || 0,
+(match[5] || 0),
+match[6] || 0,
match[7] ? +match[7].substring(0, 3) : 0
);
}
// Timezoneoffset of Javascript Date has considered DST (Daylight Saving Time,
// https://tc39.github.io/ecma262/#sec-daylight-saving-time-adjustment).
// For example, system timezone is set as "Time Zone: America/Toronto",
// then these code will get different result:
// `new Date(1478411999999).getTimezoneOffset(); // get 240`
// `new Date(1478412000000).getTimezoneOffset(); // get 300`
// So we should not use `new Date`, but use `Date.UTC`.
else {
let hour = +match[4] || 0;
if (match[8].toUpperCase() !== 'Z') {
hour -= +match[8].slice(0, 3);
}
return new Date(Date.UTC(
+match[1],
+(match[2] || 1) - 1,
+match[3] || 1,
hour,
+(match[5] || 0),
+match[6] || 0,
match[7] ? +match[7].substring(0, 3) : 0
));
}
}
else if (value == null) {
return new Date(NaN);
}
return new Date(Math.round(value as number));
}
文档
ECharts没有提供关于工具类的官方文档，只能从源码中查看。
工具类位于src/util下。
https://github.com/apache/echarts/blob/6.0.0/src/util/time.ts
补充：官方在useUTC参数中提到了这个工具的使用方法。
https://echarts.apache.org/zh/option.html#useUTC
https://echarts.apache.org/zh/option.html#xAxis.axisLabel.formatter
Views: 9 · Posted: 2026-03-20
——— Thanks for Reading ———
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...