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.seriesName + ' : ' + item.value + '%<br>'
    }
    return str;
  }
},

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

series: [
  {
    name: "上月违法率",
    type: "bar",
    data: [],
    z: 10,
    label: {
      normal: {
        show: true,
        formatter:function(params){ //标签内容
          return  params.value+'%'
        },
        position: 'top',
        fontSize: 10,
        color:'#000'
      }
    },
  },
  ...  
]

我们可以设置悬浮提示框的位置，代码如下：

tooltip: {
  trigger: "axis",
  axisPointer: {
    // 坐标轴指示器，坐标轴触发有效
    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
  },
  position: function(point, params, dom, rect, size) {
    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
    // 提示框位置
    var x = 0; // x坐标位置
    var y = 0; // y坐标位置
    // 当前鼠标位置
    var pointX = point[0];
    var pointY = point[1];
    // 外层div大小
    // var viewWidth = size.viewSize[0];
    // var viewHeight = size.viewSize[1];
    // 提示框大小
    var boxWidth = size.contentSize[0];
    var boxHeight = size.contentSize[1];
    // boxWidth > pointX 说明鼠标左边放不下提示框
    if(boxWidth > pointX) {
      x = 5;
    } else { // 左边放的下
      x = pointX - boxWidth;
    }
    // boxHeight > pointY 说明鼠标上边放不下提示框
    if(boxHeight > pointY) {
      y = 5;
    } else { // 上边放得下
      y = pointY - boxHeight;
    }
    return [x, y];
  }
},