Echarts tooltip 柱状图上方加百分比

朱雀 2022-05-16 02:55 877阅读 0赞

【前言】

最近在做的项目前端用到了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提示框使用格式化这个方法后设置的颜色就消失了，想了一个办法给字体加上颜色，但是用户没有提这个需求就没用了。

发表评论取消回复

表情：

评论列表（有 0 条评论，877人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 267 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 616 阅读

相关 Echarts柱状图百分比显示

option = { tooltip: { trigger: 'item', formatter

冷不防/ 2022年09月12日 12:58/ 0 赞/ 236 阅读

相关 ECharts柱状图实例

ECharts柱状图实例 test.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

古城微笑少年丶/ 2022年06月14日 04:23/ 0 赞/ 298 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 327 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 287 阅读

相关 ECharts柱状图百分比显示

ECharts柱状图百分比显示 ![Center][] //shop为div的id var city\_all\_bar = echarts.init(do

系统管理员/ 2022年06月04日 05:41/ 0 赞/ 409 阅读

相关 Echarts tooltip 柱状图上方加百分比

【前言】最近在做的项目前端用到了echarts，有个需求就是在柱状图上方加上数据并且加上百分号。【过程】经过多方实践，终于成功了。 > series\[\{ >

朱雀/ 2022年05月16日 02:55/ 0 赞/ 878 阅读

相关 echarts柱状统计图

目录一、简单的echarts柱状统计图二、柱状图和折线图混搭三、一个项目里同时用不同版本的echarts画图 -------------------- 一、

àì夳堔傛蜴生んèń/ 2022年01月30日 15:13/ 0 赞/ 705 阅读

相关 ECharts之横向百分比柱状图

效果图 ![在这里插入图片描述][20191015094349429.gif] 背景图片 ![20190725170845879.png][] 下载EChar

古城微笑少年丶/ 2021年08月13日 12:40/ 0 赞/ 1347 阅读