echart的柱状图上不仅要提供value,还要真实的百分比

经查阅echart文档,柱状图是不提供formatter的百分比的,  也就是说他的{d} 是没有意义的,但是我们又需要计算百分比,这样就需要使用formatter的回调函数.代码如下

       this.options.series[0].label.formatter = function (params) {
          let value = params.value;

          return value + '(' + (value / totalCount * 100).toFixed(1) + '%)'
       }

  这里的options是定义在vue的data里面的, totalCount是加起来的数据,我这里保留一位小数.

     注意有一个问题,

 

series的label里面不要使用normal,否则上述代码无法执行.
echart版本为5.1.0

  

posted @ 2021-07-29 14:38  莫邪曲  阅读(301)  评论(0)    收藏  举报