Echarts折线图划动或点击到对应数据点时联动对应的卡片数据

325 阅读1分钟

tooltio触发方式为line的情况下,拖动提示框纵向指示线或点击数据点同步修改下方几个卡片的数据,如下图

image.png

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)',
            ...
        },
        ...
    }
}