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

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

情况说明

  1. 默认的显示,会自带小圆点,如图:
    在这里插入图片描述

  2. 但在使用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 ''
  }
},

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/IT_dabai/article/details/129196418