tooltio触发方式为line的情况下,拖动提示框纵向指示线或点击数据点同步修改下方几个卡片的数据,如下图
click事件仅在点击到数据点时触发,zrender监听空白处点击事件范围过大,还需要判断mouse事件,简便一些的做法可直接在tooltiop属性的formatter事件中加入数据联动的处理:
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.8)',
formatter: (params) => {
let obj = params[0];
// this.renderCardList处理对应数据
// 拖动时频率过高,节流处理
throttle(this.renderCardList(obj.dataIndex), 1000);
...
},
axisPointer: {
type: 'line',
snap: true,
lineStyle: {
color: 'rgba(91, 143, 249, 0.8)',
...
},
...
}
}