echarts中tooltip 基本样式问题处理

最新推荐文章于 2025-06-20 18:05:02 发布

原创最新推荐文章于 2025-06-20 18:05:02 发布 · 1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #tooltip

前端专栏收录该内容

14 篇文章

订阅专栏

本文分享了在ECharts中解决两个常见样式问题的方法：一是如何让tooltip中的数值换行显示，二是当X轴标题过长时如何通过设置字数限制和使用省略号来改善显示效果。

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

在echarts中遇到几个样式问题，现总结如下：

1、tooltip中样式中值换行

在tooltip中修改加上一句代码

formatter: '{b0}: {c0}<br />'

示例如下：

tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },formatter: '{b0}: {c0}<br />'
                    }

最终效果：

2、X轴超过4个标题显示不完全

在xAxis中加上这段代码鉴于字数长度过长，排版不够，这里设置了字数长度，多出的用省略号替代

axisLabel: {
                            interval: 0,
                            formatter: function(value) { /*return value.split("").join("\n");*/
                                if(value.length > 3) {
                                    return value.substring(0, 3) + "..";
                                } else {
                                    return value;
                                }
                            }
                        }

示例如下：

     xAxis: [{
                            type: 'category',
                            data: ['承办总件次', '承办单位数', '独办', '分办', '主办'],

                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function(value) { /*return value.split("").join("\n");*/
                                    if(value.length > 3) {
                                        return value.substring(0, 3) + "..";
                                    } else {
                                        return value;
                                    }
                                }
                            }

                        }],

最终效果：