在 ECharts 中,需要对于不同时间间隔的系列,对工具提示进行特殊处理,以保证正确性和可读性。
首先,需要在各个系列的数据项中加入 tooltip
属性,以覆盖全局的 tooltip
配置。其中,使用 formatter
参数来自定义工具提示的展示内容。在 formatter
函数中,可以使用 JavaScript 的日期方法对时间戳进行格式化,以实现自定义的时间展示格式。
以下是一个示例代码,展示了如何针对不同时间间隔的系列对工具提示进行定制化。
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: [
{
type: 'time',
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: false
}
}
],
series: [
{
name: 'A',
type: 'line',
showSymbol: false,
data: [
[1488372600000, 88],
[1488374400000, 123],
[1488376200000, 121],
[1488378000000, 112],
[1488379800000, 99],
[1488381600000, 95],
[1488383400000, 92],
[1488385200000, 94],
[1488387000000, 99],
[1488388800000, 100],
[1488390600000, 105],
[1488392400000, 114],
[1488394200000, 115]
],
tooltip: {
formatter: function (params) {
var date = new Date(params.value[0]);
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' +
date.getHours() + ':' + date