echart tooltip左边的小圆点怎么设置

最新推荐文章于 2024-09-19 14:02:34 发布

原创最新推荐文章于 2024-09-19 14:02:34 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端同时被 2 个专栏收录

38 篇文章

订阅专栏

echarts

4 篇文章

订阅专栏

当使用Echarts自定义tooltip的内容，特别是添加温度单位时，可能会发现默认的小圆点消失。解决这个问题的关键在于`formatter`配置，通过添加`marker`字段，可以恢复或定制这个小圆点，例如将`<span>`标签插入到内容前面来实现。

echart tooltip左边的小圆点怎么设置？

情况说明

默认的显示，会自带小圆点，如图：
但在使用echart图表时，时常会自定义tooltip，来达到自己想要显示的提示内容，比如这里我就想给温度带上单位。
在自定义后，会发现tooltip里默认左边带的小圆点消失了，如图：

解决方法

配置 tooltip 的 formatter
这是打印的值在这里插入图片描述

这里有一个字段marker，他其实就是一个span标签，也就是之前默认的小圆点。
这里我们把它加在前面即可（同理，也可以自己自定义一个span标签加进去）

tooltip: {
  trigger: "axis",
  formatter: (arr) => {
    if(arr && arr.length > 0) {
      const val = arr[0];
      let str = val.name + '<br/>'
      str += `${val.marker}${val.seriesName}: ${val.value}℃`
      return str;
    }
    return ''
  }
},