Echarts中堆叠柱状图之百分比显示

最新推荐文章于 2025-06-27 18:57:53 发布

置顶 flym_

最新推荐文章于 2025-06-27 18:57:53 发布

阅读量1.7w

点赞数 12

CC 4.0 BY-SA版权

分类专栏：工具方法文章标签： Echarts 前端图表可视化 JavaScript

本文链接：https://blog.youkuaiyun.com/u014689760/article/details/81171334

工具同时被 2 个专栏收录

11 篇文章

订阅专栏

方法

8 篇文章

订阅专栏

本文介绍如何在ECharts的Tooltip中同时显示数据值及其占总数的百分比，并通过字符串模板和回调函数两种方式实现了具体的效果。适用于需要在图表上直观展示数据占比的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：tooltip显示其数量之外，还需在旁边显示该数量所占总数的百分比，具体效果图如下：

这里写图片描述

# 字符串模板

折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
注意：类目值就是对应的横坐标。
例子：

 tooltip: {
    trigger: 'axis',
    axisPointer: {
         type : 'shadow'
    },
    formatter: '{b} <br /> {a0}: {c0}<br />{a1}: {c1} <br /> {a2}: {c2}' + "%"
},

# 回调函数

回调函数格式：(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
例子

tooltip: {
    trigger: 'item',
    position:'right',
    formatter : function(params, ticket, callback) {
        if (params.value == undefined || params.value !== params.value) {
            params.value = 0;
        }
        return  params.seriesName +" <br />" + params.name + ":" + params.value + "%";        
    }
},

　需求实现

"tooltip": {
       "trigger": "axis",
       "axisPointer": {
"type": "shadow",
"textStyle": {
        "color": "#fff"
},
"label": {
        "precision": 2,
    }
},
formatter : function(params, ticket, callback) {
    let obj = params.map((item, index) => {
        if (item.value == undefined || item.value !== item.value) {
                item.value = 0;
        }
    let percent = ((item.value / params[params.length - 1].value) * 100).toFixed(2)
    // 小圆点显示
    let dotColor = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>'
            return dotColor + item.seriesName + ":" + item.value + '(' + percent + '%' + ')' + '</br>'
        })
            return obj.join('') // 去除','
        }
},