echarts 图形的tooltip需要展示很多相关的内容

最新推荐文章于 2024-07-09 17:41:07 发布

sunny.day

最新推荐文章于 2024-07-09 17:41:07 发布

阅读量761

点赞数

本文链接：https://blog.youkuaiyun.com/yang__k/article/details/116139941

版权

本文介绍如何在ECharts中利用自定义数据项展示更多细节信息，例如通过tooltip提供额外数据或者实现点击下钻功能。只需将附加数据作为对象推送到data数组中，尽管图形显示依赖于'value'字段，但其他字段可用于丰富图表交互。

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

有时候会遇到那种需求，在tooltip中展示很多相关数据，或者是点击图形，带着一些相关数据去下钻。

只要有拿的到的数据，在给对应data值的时候，使用对象push进去，图形的数值只会取value字段对应的值；

options.serises[0].data.push(
    {name: "XXX"},
    {status: "doing"},
    {type: "start"},
    {id: "1234"},
    {value: 88},     
),
options.serises[1].data.push(
    {name: "XXX"},
    {status: "doing"},
    {type: "start"},
    {id: "1234"},
    {value: 66},     
)

如果是柱状图它现实的值只会取value，其他的这些数据，可以用在tooltip中展示更多的数据，或者是点击下钻关联内容。