Echart柱状图：自定义tooltip浮窗内容-字符串模板

最新推荐文章于 2025-05-09 16:03:32 发布

HaanLen

最新推荐文章于 2025-05-09 16:03:32 发布

阅读量2.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Echart 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_40119412/article/details/128299810

Echart 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何在ECharts中为折线图、柱状图等配置tooltip，通过不同的formatter参数实现多样化显示效果，如展示多系列数据及自定义样式。

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

折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

详细可见官网：https://echarts.apache.org/zh/option.html#tooltip.formatter

配置项：

{
tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow'
  },
  textStyle: {
    fontSize: 12
  },
  formatter: `
    {b} <br/>
    {a}&nbsp;&nbsp;&nbsp;{c}<br />
  `
},
}

效果图：当存在多个系列数据时，使用{a}、{c}只会展示第一个系列！！！
在这里插入图片描述
配置项：

{
tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow'
  },
  textStyle: {
    fontSize: 12
  },
  formatter: `
    {b} <br/>
    {a0}&nbsp;&nbsp;&nbsp;{c0}<br />
    {a1}&nbsp;&nbsp;&nbsp;{c1}<br />
    {a2}&nbsp;&nbsp;&nbsp;{c2}<br />
  `                          
},
}

效果图：当存在多个系列数据时，可以使用{a0}表示第一个系列的数据，{a1}表示第二个系列的数据，以此类推！！！
在这里插入图片描述
配置项：

{
tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow'
  },
  textStyle: {
    fontSize: 12
  },
  formatter: `{b} <br/>
  <span style="background-color: red;display: inline-block; width: 8px;height: 8px; border-radius: 50%;margin-right: 4px;line-height: 12px"></span>
  {a0}&nbsp;&nbsp;&nbsp;{c0}<br />
  <span style="background-color: red;display: inline-block; width: 8px;height: 8px; border-radius: 50%;margin-right: 4px;line-height: 12px"></span>
  {a1}&nbsp;&nbsp;&nbsp;{c1}<br />
  <span style="background-color: red;display: inline-block; width: 8px;height: 8px; border-radius: 50%;margin-right: 4px;line-height: 12px"></span>
  {a2}&nbsp;&nbsp;&nbsp;{c2}<br />
  `
},
}