手动控制axisPointer的显示与隐藏

646 阅读1分钟

需求:

实现在时间横轴折线图中, 默认坐标轴指示器隐藏,点击图表区域后相应位置出现指示器并附有该点时间标签,同时将该点的所有数据传送给其它组件,5s之后指示器消失。

实现:

需要配置的属性: tooltipxAxis.axisPointer , 主要通过xAxis.axisPointer.handle 属性实现指示器的显示与否。

tooltip: {
  trigger: 'axis',
    triggerOn: 'click',
    snap: true,
    showContent: true,
    formatter: (params) => {
    let fn = useDebounceFn(() => {
      option.xAxis.axisPointer.label.show = true;  // 显示指示标签
      option.xAxis.axisPointer.handle.show = true;	// 显示坐标轴指示器
      setTimeout(() => {
        option.xAxis.axisPointer.handle.show = false;
        option.xAxis.axisPointer.label.show = true;
        myChart.setOption(option, true);	// 需设置setOption的第二个参数为true
      }, 5000);
      // 点击后执行函数
    }, 200);
  },
xAxis: {
  axisPointer: {
    lineStyle: {
      color: '#7581BD',
      width: 2,
    },
    label: {
      show: false,  // 点击后的指示标签
      formatter: function (params) {
        return formatToDateTime(params.value);
      },
      backgroundColor: '#7581BD',
    },
    handle: {	
      show: false,	// 指示器是否显示
      color: '#7581BD',
      size: 0,
    },
  }
}