echarts 折线图/柱状图 tooltip格式定制

最新推荐文章于 2025-07-07 14:26:40 发布

沈鑫Real

最新推荐文章于 2025-07-07 14:26:40 发布

阅读量6.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/sxLDWX/article/details/78518686

echarts 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细介绍了如何在Echarts中定制折线图和柱状图的Tooltip格式，重点讲解了字符串模板的使用，包括{a}(系列名称)、{b}(类目值)、{c}(数值)和{d}(无)的含义，并提供了两个实际的应用示例，帮助读者理解并掌握这一功能。

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

字符串模板

关于字符串模板的含义请参考echarts官网的配置项手册。
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
注意：类目值就是对应的横坐标。
以下是两个我的具体应用：
应用一：

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

应用二：

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 + "%";        
    }
},