Echarts tooltip 柱状图上方加百分比

【前言】

最近在做的项目前端用到了echarts,有个需求就是在柱状图上方加上数据并且加上百分号。

【过程】

经过多方实践,终于成功了。

series[{

   label:{

       normal:{

           show:true,

           position:'top'                  ---数据显示在上方

           formatter:'{c}%'                ---加上百分比

         }

}

}]

 

既然上方的数据能够加上百分号,那么tooltip提示也可以加上百分号吧。

tooltip{

        tigger:'axis',

        formatter:function(data){

             var result='';

                 for(var i=0;i<data.length;i++)

                      {

                               if(data[i].name=="value"){

                                          result+=data[i].name+":"+data[i].value+"%"+'<br>';

                                  }

                            else{

                                                 result+=data[i].name+":"+data[i].value+'<br>';

                                 }

                   } 

        return result;

}

【总结】

 这样就完成用户的需求了,但是有一个问题,tooltip提示框使用格式化这个方法后设置的颜色就消失了,想了一个办法给字体加上颜色,但是用户没有提这个需求就没用了。 

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值