Echarts 双折线图动态设置 label 位置

主要问题

在 ECharts 中实现双折线图时，折线的 label 位置默认只能固定，无法通过 formatter 动态调整，容易导致label 重叠的问题。

目标效果

解决思路

思路1：数据预处理，根据折线点的值动态设置 label.position。最终将data格式处理为[{ value: 数据值, label: { position: label位置值 } }]

思路2：通过换行调整 label 位置，通过设置 label.position 为固定位置（例如折线点上方），再利用 label.formatter 判断值大小，添加换行符以动态调整 label 显示位置。（笨笨的投机取巧的办法，这是我第一次记录的思路，也就不删了）

思路1：在data里个性化配置样式

//原始数据
lineData1 = [-3.6 , 0.8 , 0.6 , 1.2]
lineData2 = [3.1 , 2.7 , null , null]

//数据预处理，请根据自己的格式自行调整到最终的数据格式
for (let i = 0; i < lineData1.length; i++) {
  const setLabelPosition = (value, position) => ({
    value: value && value.toFixed(1),
    label: { position },
  })

  if (lineData1[i] == null || lineData2[i] == null) {
    lineData1[i] = setLabelPosition(lineData1[i], 'top')
    lineData2[i] = setLabelPosition(lineData2[i], 'top')
  } else if (lineData1[i] > lineData2[i]) {
    lineData1[i] = setLabelPosition(lineData1[i], 'top')
    lineData2[i] = setLabelPosition(lineData2[i], 'bottom')
  } else {
    lineData1[i] = setLabelPosition(lineData1[i], 'bottom')
    lineData2[i] = setLabelPosition(lineData2[i], 'top')
  }
}

// 最终整理后的数据格式
lineData1: [
  { value: -3.6, label: { position: 'bottom' } },
  { value: 0.8, label: { position: 'bottom' } },
  { value: 0.6, label: { position: 'top' } },
  { value: 1.2, label: { position: 'top' } },
],

思路2：通过换行调整 label 位置

1. 通过相对位置初始化label位置

series:[
 {
    ...
    label: {
      position: ['-100%', '-250%'], // 相对折线点的固定位置
    },
  },
]

2. 动态调整位置

series: [
  {
    ...
    label: {
      position: ['-100%', '-250%'], // 初始固定在上方
      formatter: (params) => {
        let i = params.dataIndex // 获取当前点索引
        let aPointData = params.data // 当前点值
        let bPointData = aArray[i] // 对应折线的值
        return aPointData < bPointData
          ? `\n\n${aPointData}` // 较小值换行显示在下方
          : `${aPointData}` // 较大值保持默认位置
      },
    },
  },
],