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

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

阐述

在项目上线以后，需要根据后端的数据来源，前端渲染页面时，echarts需要前端自行给页面添加 % 。根据上图效果，可以看到有两个地方需要添加 % 的。一个是是悬浮框提示信息里面，另一个地方柱状图上方需要添加 %。

解决方案如下：

首先我们给悬浮添加 %，需要操作 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',
              },
            },
          },