echarts 堆叠的柱形图 的tooltip tragger为item的显示问题

搁浅的鱼
  • 2
新手上路,请多包涵

image.png
stackbar,在tooltip设置tragger:"item"后,鼠标移到item上只会显示单独的bar的值,如下图:
image.png
image.png
想要实现当鼠标移到item,tooltip显示所有的数据:
image.png
我知道要写formatter但是不知道怎么写,因为打印出的param只有一个bar的值。。请大神帮忙。。

回复
阅读 97
1 个回答
搁浅的鱼
  • 2
新手上路,请多包涵

目前找到的解决方法:trigger设置为axis,然后编写formatter为

   formatter: ({ name, data }) => {
                  const dotHtml1 =
                    "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:darkred\"></span>"
                  const dotHtml2 =
                    "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgb(64,141,39)\"></span>"
                  const dotHtml3 =
                    "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:gray\"></span>"
                  const dotHtml4 =
                    "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgb(224,144,115)\"></span>"
                  console.log(data)
                  if (data) {
                    const { name, confirmed, dead, cured, insick } = data
                    const tip = `<b>${name}</b><br />${dotHtml1}${"确诊:"}${confirmed}<br />${dotHtml2}${"治愈:"}${cured}<br />${dotHtml3}${"死亡:"}${dead}<br />${dotHtml4}${"现存:"}${insick}<br />`
                    return tip
                  }
                  return `<b>${name}</b><br />${"暂无数据"}`
                }

dothtml是tooltip中的小圆点,没错,整个tooltip都是可以用html定制的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏