【echarts】中如何设置曲线展示最新值、最大值、最小值

需要用到的属性：图表标注 series-line. markPoint

默认可以通过 type直接标注：‘min’ 最小值、‘max’ 最大值、‘average’ 平均值。

markPoint: {
        data: [
          {
            type: 'max'
          },
          {
            type: 'min'
          }
        ]
      }

如何展示最新值

如果要展示最新值得话，需要设置 标注的坐标：series-line.markPoint.data. coord

// 定义一个方法来获取最新值
function getLatestValue(data) {
  return {
    coord: [data.length - 1, data[data.length - 1]], // 最新值的坐标
    value: data[data.length - 1], // 最新值
  };
}

// 数据
var data = [150, 290, 224, 218, 135, 147, 260];

// ECharts 配置
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: data,
      type: 'line',
      markPoint: {
        data: [
          {
            type: 'max'
          },
          {
            type: 'min'
          },
          // 添加自定义的最新值点
          getLatestValue(data)
        ],
        symbol: 'circle', // 设置为点
        symbolSize: 8, // 调整点的大小
        label: {
          position: 'right',
          fontWeight: 'bold', // 标签字体加粗
          fontSize: 12 // 标签字体大小
        }
      }
    }
  ]
};