ECharts获取引导线在左右方向自定义引导线内容

ECharts获取引导线在左右方向自定义引导线内容

类似这种效果：

​​

其中的圆环区分左右布局。

labelLayout函数

​option.series[index].labelLayout​

其中data1就是series数据源。

labelLayout: (params) => {
  // console.log(params)
  const isLeft = params.labelRect.x < chart.getWidth() / 2
  // console.log(isLeft)
  params.text &&
    labelLinePostionList.push({
      data: data1[params.dataIndex],
      isLeft,
      x: params.labelRect.x - params.labelRect.width * (isLeft ? 0 : -1),
      y: params.labelRect.y
    })
}

‍

graphic自定义

chart.setOption({
  graphic: [
    ...labelLinePostionList.map((item) => {
      console.log(item)
      return {
        type: 'text',
        style: {
          text: item.data.name,
          x: item.x - (item.isLeft ? 38 : -2),
          y: item.y + 2,
          fill: '#fff'
        }
      }
    }),
    ...labelLinePostionList.map((item) => {
      return {
        type: 'text',
        style: {
          fontSize: 16,
          fontWeight: 'bold',
          text: item.data.value,
          x: item.x - (item.isLeft ? 14 : -2),
          y: item.y + 20,
          fill: '#fff'
        }
      }
    })
  ]
})