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

发布于 2022-09-12 23:32:21 字数 405 浏览 24 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

素衣风尘叹 2022-09-19 23:32:21

目前找到的解决方法: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定制的。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文