Echart tooltip控制每一个series的显示

2,414 阅读1分钟

😭看Echart文档找这个的解决方案真滴找不着,最后自己用了一种“拆”的方案,如果有3个series,那么就拆成三个grid,下文给好兄弟萌细说。

为什么只是拆

也许有别的方法,但是我只找到这么一个改起来复杂,但是功能完整实现的方法。其他API手册中的方法有限制,比如把tooltip放在series配置项里,有触发方式axis、item的区别,BAR行!LINE又不行。本方法直接无视axis和item。

过程

  1. 把要控制的一个(一组)tooltip对应的series拆成若干组并分配到Grid中。
// 本例子将两个在同一个grid里的两个series拆成了两个。
// 就是在这里拆
{
    tooltip: {
            trigger: 'axis'|'item' // 都没有关系!
          },
    grid: [
            { ..., tooltip: { show: true }},
            { ..., tooltip: { show: false }}
          ],
          
   yAxis: [
            {      
                ...
              show: true,
              gridIndex: 0
            },
            {
               ...
              gridIndex: 1
            }
           ],
    xAxis: [
            {
             ...
              show: true,
              gridIndex: 0
            },
            {
              ...
              show: false,
              gridIndex: 1
            }
          ],
       series: [
            {
              yAxisIndex: 0,
              xAxisIndex: 0,
            },
            {
              yAxisIndex: 1,
              xAxisIndex: 1,
            }
          ]
}

  1. 在拆分的过程中,不同的Grid有不同的series,但是坐标轴相同啊!那么就两步:“复制坐标轴、然后隐藏”。
  2. 在grid对应的条目中,设置tooptip show即可。
// 手动高亮!
{
    grid: [
            { ..., tooltip: { show: true }},
            { ..., tooltip: { show: false }}
          ],
}

EOF