echarts的tooltip显示百分号 加 % 的几种方式

echarts的tooltip显示百分号 加 % 的几种方式

阐述

解决方案如下：

首先我们给悬浮添加 %，需要操作 tooltip 下的 format ，代码如下：

tooltip: {
          
   
  trigger: "axis",
  axisPointer: {
          
   
    type: "shadow" // 默认为直线，可选为：line | shadow
  },
  formatter:function(params) {
          
   
    var str = params[0].name + <br>
    for(let item of params) {
          
   
      str += item.name +  :  + item.value + %<br>
    }
    return str;
  }
}

给柱状图上面添加 %，则需要给 series 中 label 添加显示相关信息，代码如下：

series: [
  {
          
   
    name: "课程",
    type: "bar",
    data: [],
    z: 11,
    label: {
          
   
      normal: {
          
   
        show: true,
        formatter:function(params){
          
    //标签内容
          return  params.value + %
        },
        position: top,
        fontSize: 10,
        color:#cdcdcd
      }
    },
  },
  ...  
]

tooltip的值配置保留2位小数，且数据后面添加%或者其他单位

tooltip: {
          
   
            trigger: axis,
            //核心代码，处理tooltip中的数据需要在此formatter函数中做处理
            formatter(params) {
          
   
                var relVal = params[0].name;
                for (var i = 0, l = params.length; i < l; i++) {
          
   
                   console.log(tooltip数据值,params[i].value)
                   //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
                    relVal += <br/> + params[i].marker + params[i].seriesName +  :  + Number(params[i].value).toFixed(2) + %
                }
                return relVal;
            },
            axisPointer: {
          
   
              type: cross,
              crossStyle: {
          
   
                color: #000,
              },
            },
          },