ECharts里面 tooltip中要显示百分号% 和tooltip对齐问题

原创 已于 2025-05-24 00:03:33 修改 · 1.2k 阅读 · 20 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
于 2025-05-24 00:03:15 首次发布

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

需求：有一个统计报表，显示一个人一周的时间分布，看他的学习占比，和工作占比。鼠标移动到tooltip内容的时候，发现百分比没有显示%。需要让他显示

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>周时间分布统计</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Menlo', 'Consolas', monospace;
        }
    </style>
</head>

<body>
    <div id="main" style="width: 1200px;height:600px;"></div>
    <script>
        const chart = echarts.init(document.getElementById('main'))

        // 数据配置
        const dataConfig = {
            days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            categories: ['工作', '休息', '娱乐', '学习', '社交'],
            timeData: [
                [8, 2, 3, 2, 1],
                [9, 1, 2, 2, 2],
                [7, 3, 2, 3, 1],
                [8, 2, 2, 2, 2],
                [7, 1, 3, 3, 2],
                [4, 4, 6, 2, 4],
                [3, 5, 5, 3, 4]
            ],
            getPercentData: (typeIndex) => {
                return dataConfig.timeData.map(day => {
                    const total = day.reduce((a, b) => a + b, 0)
                    return Number(((day[typeIndex] / total) * 100).toFixed(2))
                })
            }
        }

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
            },
            legend: {
                data: [...dataConfig.categories, '学习占比', '工作占比'],
                textStyle: {
                    fontSize: 14
                }
            },
            xAxis: [{
                type: 'category',
                data: dataConfig.days,
                axisLabel: {
                    fontSize: 14
                }
            }],
            yAxis: [{
                type: 'value',
                name: '时间（小时）',
                min: 0,
                max: 24,
                axisLabel: {
                    fontSize: 14
                }
            }, {
                type: 'value',
                name: '占比',
                min: 0,
                max: 100,
                // 移除了Y轴标签的%符号
                axisLabel: {
                    formatter: '{value}',
                    fontSize: 14
                }
            }],
            series: [
                ...dataConfig.categories.map((name, idx) => ({
                    name,
                    type: 'bar',
                    stack: 'time',
                    data: dataConfig.timeData.map(day => day[idx]),
                    itemStyle: {
                        color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'][idx]
                    }
                })), {
                    name: '学习占比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: dataConfig.getPercentData(3),
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        color: '#EE6666'
                    }
                }, {
                    name: '工作占比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: dataConfig.getPercentData(0),
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        color: '#5470C6'
                    }
                }
            ]
        }

        chart.setOption(option);
    </script>
</body>

</html>

（1）自定义tooltip格式化函数

具体步骤可能包括：

  1. 在tooltip配置中添加formatter函数。
  2. 在formatter函数中遍历所有当前触发的数据点。
  3. 对每个数据点，判断其系列名称，如果是百分比系列，则在数值后添加%。
  4. 确保数值格式化正确，例如保留两位小数

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>周时间分布统计</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <style>
        body { font-family: 'Menlo', 'Consolas', monospace; }
    </style>
</head>
<body>
    <div id="main" style="width: 1200px;height:600px;"></div>
    <script>
        const chart = echarts.init(document.getElementById('main'));

        // 数据配置
        const dataConfig = {
            days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            categories: ['工作', '休息', '娱乐', '学习', '社交'],
            timeData: [
                [8, 2, 3, 2, 1],  
                [9, 1, 2, 2, 2],  
                [7, 3, 2, 3, 1],  
                [8, 2, 2, 2, 2],  
                [7, 1, 3, 3, 2],  
                [4, 4, 6, 2, 4],  
                [3, 5, 5, 3, 4]   
            ],
            getPercentData: (typeIndex) => {
                return dataConfig.timeData.map(day => {
                    const total = day.reduce((a,b) => a + b, 0);
                    return Number(((day[typeIndex]/total)*100).toFixed(2));
                })
            }
        };

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' },
                formatter: (params) => {
                    const day = params[0].axisValue;
                    let result = `<b>${day}</b><br>`;
                    
                    // 修复点：直接使用p.value
                    const timeItems = params
                        .filter(p => p.seriesType === 'bar')
                        .map(p => `${p.marker} ${p.seriesName}: ${p.value}小时`); // 直接取value
                    
                    const percentItems = params
                        .filter(p => p.seriesType === 'line')
                        .map(p => `${p.marker} ${p.seriesName}: ${p.value}%`);

                    return [...timeItems, ...percentItems].join('<br>');
                }
            },
            legend: {
                data: [...dataConfig.categories, '学习占比', '工作占比'],
                textStyle: { fontSize: 14 }
            },
            xAxis: [{
                type: 'category',
                data: dataConfig.days,
                axisLabel: { fontSize: 14 }
            }],
            yAxis: [
                { 
                    type: 'value',
                    name: '时间（小时）',
                    min: 0,
                    max: 24,
                    axisLabel: { fontSize: 14 }
                },
                { 
                    type: 'value',
                    name: '占比',
                    min: 0,
                    max: 100,
                    axisLabel: { 
                        formatter: '{value}%',
                        fontSize: 14
                    }
                }
            ],
            series: [
                // 堆叠柱状图系列
                ...dataConfig.categories.map((name, idx) => ({
                    name,
                    type: 'bar',
                    stack: 'time',
                    data: dataConfig.timeData.map(day => day[idx]), // 数据格式为单值数组
                    itemStyle: {
                        color: ['#5470C6','#91CC75','#FAC858','#EE6666','#73C0DE'][idx]
                    }
                })),
                // 折线图系列
                {
                    name: '学习占比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: dataConfig.getPercentData(3),
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: { color: '#EE6666' }
                },
                {
                    name: '工作占比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: dataConfig.getPercentData(0),
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: { color: '#5470C6' }
                }
            ]
        };

        chart.setOption(option);
    </script>
</body>
</html>

或者，这样并没有两端对齐，可以加一些代码实现Tooltip两端对齐

  • 使用display: table创建表格布局，设置table-layout: fixed固定列宽
  • 定义两列：名称列（name-col）120px，数值列（value-col）100px
  • 数值列设置text-align: right实现右对齐

在这里插入图片描述

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>周时间分布统计</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <style>
        body { 
            font-family: 'Menlo', 'Consolas', monospace; 
        }
        /* Tooltip表格布局样式 */
        .tooltip-table {
            display: table;
            table-layout: fixed;
            width: 240px;
        }
        .tooltip-row {
            display: table-row;
        }
        .tooltip-cell {
            display: table-cell;
            padding: 2px 0;
            vertical-align: middle;
        }
        .name-col {
            width: 120px;
            padding-right: 10px;
        }
        .value-col {
            width: 100px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="main" style="width: 1200px;height:600px;"></div>
    <script>
        const chart = echarts.init(document.getElementById('main'));

        // 数据配置
        const dataConfig = {
            days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            categories: ['工作', '休息', '娱乐', '学习', '社交'],
            timeData: [
                [8, 2, 3, 2, 1],  
                [9, 1, 2, 2, 2],  
                [7, 3, 2, 3, 1],  
                [8, 2, 2, 2, 2],  
                [7, 1, 3, 3, 2],  
                [4, 4, 6, 2, 4],  
                [3, 5, 5, 3, 4]   
            ],
            getPercentData: (typeIndex) => {
                return dataConfig.timeData.map(day => {
                    const total = day.reduce((a,b) => a + b, 0);
                    return Number(((day[typeIndex]/total)*100).toFixed(2));
                })
            }
        };

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' },
                formatter: (params) => {
                    const day = params[0].axisValue;
                    let html = `
                        <div class="tooltip-table">
                            <div class="tooltip-row">
                                <div class="tooltip-cell" style="font-weight:bold;padding-bottom:8px">${day}</div>
                            </div>
                    `;

                    // 生成数据行
                    params.forEach(item => {
                        const isPercent = item.seriesName.includes('占比');
                        const name = isPercent ? 
                            item.seriesName : 
                            `${item.seriesName}：`; // 非占比类添加全角冒号
                        
                        const value = isPercent ? 
                            `${item.value.toFixed(2)}%` : 
                            `${item.value}小时`;

                        html += `
                            <div class="tooltip-row">
                                <div class="tooltip-cell name-col">
                                    ${item.marker} ${name}
                                </div>
                                <div class="tooltip-cell value-col">
                                    ${value}
                                </div>
                            </div>
                        `;
                    });

                    html += '</div>';
                    return html;
                }
            },
            legend: {
                data: [...dataConfig.categories, '学习占比', '工作占比'],
                textStyle: { fontSize: 14 }
            },
            xAxis: [{
                type: 'category',
                data: dataConfig.days,
                axisLabel: { 
                    rotate: 45,
                    fontSize: 14
                }
            }],
            yAxis: [
                { 
                    type: 'value',
                    name: '时间（小时）',
                    min: 0,
                    max: 24,
                    axisLabel: { fontSize: 14 }
                },
                { 
                    type: 'value',
                    name: '占比',
                    min: 0,
                    max: 100,
                    axisLabel: { 
                        formatter: '{value}%',
                        fontSize: 14
                    }
                }
            ],
            series: [
                ...dataConfig.categories.map((name, idx) => ({
                    name,
                    type: 'bar',
                    stack: 'time',
                    data: dataConfig.timeData.map(day => day[idx]),
                    itemStyle: {
                        color: ['#5470C6','#91CC75','#FAC858','#EE6666','#73C0DE'][idx]
                    }
                })),
                {
                    name: '学习占比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: dataConfig.getPercentData(3),
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: { color: '#EE6666' }
                },
                {
                    name: '工作占比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: dataConfig.getPercentData(0),
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: { color: '#5470C6' }
                }
            ]
        };

        chart.setOption(option);
    </script>
</body>
</html>

（2）valueFormatter属性

（2）ECharts的每个系列（series）可以有自己的tooltip配置，特别是valueFormatter属性，用来格式化该系列在Tooltip中的数值显示

  • 柱状图系列通过 valueFormatter 添加 小时 单位
  • 折线图系列通过 valueFormatter 添加 % 符号

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>周时间分布统计</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1200px;height:600px;"></div>
    <script>
        const chart = echarts.init(document.getElementById('main'));

        // 数据配置
        const dataConfig = {
            days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            categories: ['工作', '休息', '娱乐', '学习', '社交'],
            timeData: [
                [8, 2, 3, 2, 1],  
                [9, 1, 2, 2, 2],  
                [7, 3, 2, 3, 1],  
                [8, 2, 2, 2, 2],  
                [7, 1, 3, 3, 2],  
                [4, 4, 6, 2, 4],  
                [3, 5, 5, 3, 4]   
            ],
            getPercentData: (typeIndex) => {
                return dataConfig.timeData.map(day => {
                    const total = day.reduce((a,b) => a + b, 0);
                    return Number(((day[typeIndex]/total)*100).toFixed(2));
                })
            }
        };

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            legend: {
                data: [...dataConfig.categories, '学习占比', '工作占比']
            },
            xAxis: [{
                type: 'category',
                data: dataConfig.days,
                axisLabel: { rotate: 45 }
            }],
            yAxis: [
                { 
                    type: 'value',
                    name: '时间（小时）',
                    min: 0,
                    max: 24
                },
                { 
                    type: 'value',
                    name: '占比',
                    min: 0,
                    max: 100,
                    axisLabel: { formatter: '{value}%' }
                }
            ],
            series: [
                // 堆叠柱状图系列
                ...dataConfig.categories.map((name, idx) => ({
                    name,
                    type: 'bar',
                    stack: 'time',
                    data: dataConfig.timeData.map(day => day[idx]),
                    tooltip: {
                        valueFormatter: value => `${value} 小时` // 时间格式化
                    },
                    itemStyle: {
                        color: ['#5470C6','#91CC75','#FAC858','#EE6666','#73C0DE'][idx]
                    }
                })),
                // 学习占比折线
                {
                    name: '学习占比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: dataConfig.getPercentData(3),
                    tooltip: {
                        valueFormatter: value => `${value}%` // 百分比格式化
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: { color: '#EE6666' }
                },
                // 工作占比折线
                {
                    name: '工作占比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: dataConfig.getPercentData(0),
                    tooltip: {
                        valueFormatter: value => `${value}%` // 百分比格式化
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: { color: '#5470C6' }
                }
            ]
        };

        chart.setOption(option);
    </script>
</body>
</html>

优化建议

  • 如需更紧凑的显示，可添加全局样式：

    body { font-family: 'Menlo', 'Consolas', monospace; }

  • 调整提示框宽度：

    tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
    confine: true, // 防止溢出
    extraCssText: 'width: 240px;' // 固定宽度
}

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看
标签
#echarts #android #前端
ECharts 触发click点击事件
旭东怪的博客
10-14 1万+
1 实现代码 <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(docume
echarts水球图-动态波纹百分比数据显示
一往直“前”，直上云“端”
11-06 1万+
最近帮助朋友根据ued图学习设计了一个echarts水球图，觉得还蛮有意思的，在这记录一下 具体效果： 看看，这种带比例的echarts是不是很像个水球，随着比例变动水位不断变化，再看看那一圈圈涟漪（ps：就这些‘涟漪’开始麻烦死了……） 进入正题： 废话不多说，直接上代码，希望对你有帮助： function Pie() { let dataArr = []; for (var i = 0; i <. 前端水球图；vue水球图；...
Echarts-之显示百分比
热门推荐
u012235651的专栏
05-26 7万+
对于使用echarts要显示百分比，要改两个地方，第一个地方时坐标轴显示为百分比的格式，第二个是让值以百分比的形式显示，如50，在图上面显示为50%。yAxis: [ { type: 'value', axisLabel: { show: true,
echarts的tooltip显示百分号 加 % 的几种方式
zxh7770的博客
05-25 1万+
echarts的tooltip显示百分号 加 % 的几种方式 阐述 在项目上线以后，需要根据后端的数据来源，前端渲染页面时，echarts需要前端自行给页面添加 % 。根据上图效果，可以看到有两个地方需要添加 % 的。一个是是悬浮框提示信息里面，另一个地方柱状图上方需要添加 %。 解决方案如下： 首先我们给悬浮添加 %，需要操作 tooltip 下的 format ，代码如下： tooltip: { trigger: "axis", axisPointer: { type: "shadow
【echarts自定义tooltip,给tooltip增加百分号%】【tooltip换行，两列】
Min_Fox的博客
07-24 3393
echarts自定义tooltip,给tooltip增加百分号%。换行
echarts的tooltip显示百分号
前端小贰
05-24 1万+
需求：想要tooltip显示百分数，并要有颜色提示。 按官方文档，tooltip可以通过表达式设置百分号， formatter: '{b0}<br /> {a0}:{c0}<br />{a1}: {c1}%' 效果是这样的： 可以看到，有一个问题，这样设置的提示信息，就没有数据的颜色提示了。 一番折腾后，得到了我想要的效果： 思路： 1、修改too...
关于echarts折线图tooltip显示百分号问题
魏知非的博客
09-19 1万+
一、 代码如下： tooltip: { formatter: 'value', trigger: 'axis', }, 最初显示的样式如下图所示 纵坐标虽然显示带有%，但是鼠标单个滑到一个柱状图上时，合格率并没有带% 二、 tooltip: { formatter: '{b0}<br />{a0}:{c0}<br />{a1}:{c1}%', ...
Echarts 柱状图tooltip 数值后加百分号、内容居中、tooltip添加背景图片
林中明月间丶
11-22 6954
echarts tooltip 数值后显示 % - _houjie - 博客园 需求：要求 echarts 在鼠标 hover 时可以看到数据后面显示百分号（数据已是后台处理过的）。 效果图： 代码： tooltip: { trigger: 'axis', formatter: function(params) { var result = params[0].name + "<br>"; pa
echarts tooltip 数值后显示 %
weixin_30480651的博客
08-02 688
需求：要求 echarts 在鼠标 hover 时可以看到数据后面显示百分号（数据已是后台处理过的）。 效果图： 代码： tooltip: { trigger: 'axis', formatter: function(params) { var result = params[0].name + "&lt...
echarts 添加百分号
qq_36437172的博客
03-14 6246
效果图如下： 根据后端的数据来源，前端渲染页面时，需要前端自行给页面添加 % 。根据上图效果，可以看到有两个地方需要添加 % 的。一个是是悬浮框提示信息里面，另一个地方柱状图上方需要添加 %。 首先我们给悬浮添加 %，需要操作tooltip 下的 format ，代码如下： tooltip: { trigger: "axis", axisPointer: { // 坐...
ECharts给自定义tooltip（此处为给最后一个加百分号%）
WCR_520的博客
01-13 773
ECharts给自定义tooltip（此处为给最后一个加百分号%） 效果 tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } }, formatter: (params) => { var html = params[0].name + '<br>'; // params[i].marker：对应数据的圆点样式 for (var
Echarts提示框自定义显示百分号
a5252145的博客
07-18 2406
Echarts提示框自定义显示百分号 tooltip: { trigger: 'axis', formatter: '{b0}<br/>{a0}:{c0}%<br/>{a1}: {c1}%<br/>{a2}:{c2}%<br/>{a3}:{c3}%<br/>{a4}:{c4}%<br/>', borderWidth:0,...
ECharts显示百分比(小数转百分比)
weixin_30316097的博客
05-28 2959
后台数据传递给前端是小数格式，例如：0.2248 前端显示要求为:22.48% 方法，设置tooltip.formatter和yAxis.axisLabel.formatter，两个分别是提示语格式化和Y轴标签格式化。 示例： //初始化echart var myChart = echarts.init(document.getElementById('chartA...
echarts柱状图实现数据百分比展示 （数据相加为100%）
weixin_45195355的博客
01-15 3336
【代码】echarts柱状图实现数据百分比展示 （数据相加为100%）
ECharts中图表百分比（%）的实现方式
赵小默的博客
08-17 7340
①使用echarts中formatter参数 例如： tooltip: { trigger: 'item', formatter:'{c}%'　　 }, 注：变量a、b、c在不同图表中代表数据的意义： 折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无） 散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无） 饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）,...
echarts柱状图y轴展示百分比，鼠标移入label展示数值
细节怪的博客
08-12 2万+
echarts官网提供的是y轴展示数据和label同步，都是柱条数值，我们只需要将该数值数组做一次转换，再赋值给series的data就可以实现。
Echarts柱状图，如何基于数据进行百分比显示
Gamelifezhao的博客
04-26 1万+
mock数据： const a = [ { reju: 'a', yuanyou: '1234', kuorong: '3456', rengonganju_: '6577', rengongganyu__: '5674' }, { ...
echarts折线图 、数据百分比
darkCloudss的博客
08-13 1万+
echarts y轴百分比 在yAxis中加上 formatter: ‘{value} %’ yAxis: { type: 'value', axisLabel: { show: true, interval: 'auto', formatter: '{value} %'//纵坐标百分比 }
echarts 柱线图显示百分比占比+数据汇总
最新发布
petrel_921的博客
07-17 1148
echarts柱线图显示汇总+数据汇总
vue3+echarts实现炫酷的百分比饼图，echarts组件封装
super帅的博客
01-05 4535
vue3+echarts实现炫酷的百分比饼图，echarts组件封装
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值