echarts实用代码模板

一、键盘事件控制tooltip移动

let currentIndex = -1;
const dataLen = option.series[0].data.length;
const handleKeydown = (e) => {
if(e.key!="ArrowRight"&&e.key!="ArrowLeft"){
  return;
}

console.log('handleKeydown:'+currentIndex);
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  
  currentIndex = (currentIndex + (e.key=="ArrowRight"?1:(e.key=="ArrowLeft"?-1:0))) % dataLen;
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
};

myChart.on('click', 'series',function(params) {
  if (event.target) {
    window.addEventListener('keydown', handleKeydown);
    currentIndex=params.dataIndex;
    console.log('非空白:添加按键事件 currentIndex:'+currentIndex);
  }
});
myChart.getZr().on('click', 'series',function(event) {
  if (!event.target) {
    console.log('空白:移除按键事件');
    window.removeEventListener('keydown', handleKeydown);
  }
});