echarts设置视觉引导线穿过两行文字的效果

最新推荐文章于 2023-12-20 14:34:29 发布

东之建大坏蛋

最新推荐文章于 2023-12-20 14:34:29 发布

阅读量513

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/WanweI897/article/details/127551428

版权

echarts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现效果：
在这里插入图片描述
代码：

label: {
  formatter: '数量\n350', // \n设置文字换行
  lineHeight: 24         // 设置一个合适的行高
},

// 设置视觉引导线结束点的位置，让其从两行文字中穿过
labelLayout: function (params) {
  // 判断label在图表的左侧还是右侧
  const isLeft = params.labelRect.x < myChart.clientWidth / 2
  const points = params.labelLinePoints

  // 设置线结束点的位置
  points[2][0] = isLeft
    ? params.labelRect.x
    : params.labelRect.x + params.labelRect.width

  return { labelLinePoints: points }
},