eCharts如何实现X轴日期区间折线高亮并解决coord报错

在X轴为日期维度、Y轴为数值维度的折线图中，需要按日期高亮指定区间。参考官方折线分区示例编写配置后，触发报错：TypeError: Cannot read properties of undefined (reading 'coord')。
当前使用的配置如下：

{
xAxis: {
  type: "category",
  data: xaxis,
  show: true,
  axisLabel: {
    formatter: function(params:any){
      return (new Date(params)).toLocaleString('pt-BR')
    }
  }
},
yAxis: {
  type: "value",
  name: 'Eficiência de Consumo (Nm³/ton)',
  axisLabel: {
    formatter: '{value}'
  }
},
dataZoom: [
  {
    type: 'inside'
  }
],
tooltip: {
  trigger: "axis",
  formatter: function(params:any){
    const seriesName = params[0].seriesName
    const timeStamp = (new Date(params[0].axisValue)).toLocaleString('pt-BR')
    const eficiencia = params[0].value
    return `${seriesName} <br/> ${timeStamp}: ${eficiencia} Nm³/ton`
  },
  axisPointer: {
    label: {
      backgroundColor: "#6a7985"
    }
  }
},
legend: {
  orient: 'horizontal',
  top: 'top'
},
visualMap: {
  show: false,
  pieces: [
    {
      min: startAlertTime,
      max: endAlertTime,
      color: '#FBDB0F'
    }
  ]
},
series: [{
  data: yaxis,
  name: 'Eficiência de Consumo',
  type: "line",
}]}

配置中startAlertTime和endAlertTime为ISO格式时间戳，预期实现两个时间戳对应X轴区间内的折线高亮为黄色的效果。

• visualMap默认映射series数据的Y轴数值，你没有指定映射X轴时间维度，且series仅传入了Y轴一维数值数组，ECharts计算高亮点位时拿不到对应X轴坐标信息，触发coord读取错误。
• pieces中传入的ISO格式时间字符串无法直接做数值区间判断，匹配规则不生效。

• 提前将所有时间值统一转为数值型时间戳，包括X轴数据、高亮区间的起止时间。
• 将series数据从纯Y值一维数组，调整为[X轴时间戳, Y轴数值]的二维结构，让每个数据点自带X维度信息。
• 给visualMap添加dimension: 0配置，明确指定映射数据的第0位（即X轴时间维度），同时补全非高亮区间的默认折线颜色，避免其他线段颜色异常。
• 调整tooltip格式化逻辑，适配新的二维数据结构。

// 提前处理时间：高亮区间转数值时间戳
const alertStartTs = new Date(startAlertTime).getTime()
const alertEndTs = new Date(endAlertTime).getTime()
// 合并X、Y数据为二维结构，X值统一转数值时间戳
const seriesData = xaxis.map((xItem, index) => {
  return [new Date(xItem).getTime(), yaxis[index]]
})

const chartOption = {
  xAxis: {
    type: "category",
    data: xaxis.map(item => new Date(item).getTime()),
    show: true,
    axisLabel: {
      formatter: function(params){
        return new Date(params).toLocaleString('pt-BR')
      }
    }
  },
  yAxis: {
    type: "value",
    name: 'Eficiência de Consumo (Nm³/ton)',
    axisLabel: {
      formatter: '{value}'
    }
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
  tooltip: {
    trigger: "axis",
    formatter: function(params){
      const currentPoint = params[0]
      const seriesName = currentPoint.seriesName
      const timeStr = new Date(currentPoint.value[0]).toLocaleString('pt-BR')
      const efficiencyVal = currentPoint.value[1]
      return `${seriesName} <br/> ${timeStr}: ${efficiencyVal} Nm³/ton`
    },
    axisPointer: {
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  legend: {
    orient: 'horizontal',
    top: 'top'
  },
  visualMap: {
    show: false,
    dimension: 0, // 核心配置：指定映射X轴维度
    pieces: [
      {
        min: alertStartTs,
        max: alertEndTs,
        color: '#FBDB0F' // 高亮区间黄色
      },
      {
        min: -Infinity,
        max: Infinity,
        color: '#5470c6' // 非高亮区间默认折线蓝色，可根据需求替换
      }
    ]
  },
  series: [{
    data: seriesData,
    name: 'Eficiência de Consumo',
    type: "line",
  }]
}

如果你不想调整原有series数据结构，也可以使用markArea+双层series实现区间高亮效果：给目标区间加半透明黄色背景，同时叠加一层同数据的黄色折线、通过数据裁剪只显示目标区间部分，也能达到预期效果，不需要依赖visualMap。

内容的提问来源于stack exchange，提问作者Vovozona