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

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

i_da_bai

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

阅读量2k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/IT_dabai/article/details/129196418

前端同时被 2 个专栏收录

38 篇文章

订阅专栏

echarts

4 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 ''
  }
},