美文网首页
Echarts 折线图一个点显示多个实时数据tooltip

Echarts 折线图一个点显示多个实时数据tooltip

作者: 脸红卿春琦 | 来源:发表于2018-05-21 10:08 被阅读0次

    在项目开发需要中。有个需求就是在折线图的每一个折点上悬浮窗要显示几条不同的数据而且是跟x轴一样每个点不一样。。研究了一下。。有点坑。其实很简单,正常的思路来想 要想在悬浮窗显示数据 一般都会有线 才会有实时数据。。这里提一下series:data这个数据入口问题,

        问题解决就在data里面,那怎么弄呢,首先你要明白 data里面是可以json数组形式的比如官方API上的 name:”“, value:”“,等 value是echart识别折线图的KEY但是可能很多人不知道data里面可以自定义Key并且取出来,来看数据:

                     {value:"0.0",真空抛料数:"301",影像抛料数:"30"},

                    {value:"0.79",真空抛料数:"30",影像抛料数:"30",报警:["2018-05-19 02:00", "SystemLINE S16D4-1", "SystemLINE S16", 1, 3, 2, 5, 0]},

                    {value:"0.08",真空抛料数:"30",影像抛料数:"30"},

    这里面value是线上的数据 其他的是我想在tooltip悬浮窗显示的实时数据,tooltip 设置:

    这里有个小问题 如果下边样式什么的不加可以直接显示但是 加上一点样式之后不知道为什么需要微调一线才会显示。。具体可以看一下params里面的具体数据格式。到这里问题基本解决了。

    相关文章

      网友评论

          本文标题:Echarts 折线图一个点显示多个实时数据tooltip

          本文链接:https://www.haomeiwen.com/subject/gkxfjftx.html