echarts 滑动十字星展示, 关闭X轴做标上下滚动, Y轴做标左右滚动

要实现滑动十字星展示的功能，可以使用 echarts 中的 tooltip 和 dataZoom 组件。

首先，需要在 echarts 的 option 中开启 tooltip 和 dataZoom 组件：

option = {
  // 开启 tooltip 组件
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  // 开启 dataZoom 组件
  dataZoom: [
    {
      type: 'slider',
      xAxisIndex: 0,
      start: 0,
      end: 100
    },
    {
      type: 'slider',
      yAxisIndex: 0,
      start: 0,
      end: 100
    }
  ],
  // 其他配置项
  ...
};

这里我们同时开启了 x 轴和 y 轴的滑动条，分别对应 xAxisIndex 和 yAxisIndex。start 和 end 分别表示滑动条的起始和结束位置，这里设置为了 0 和 100，表示一开始整个图表都会显示出来。

接下来，需要关闭 x 轴的做标，并将其上下滚动；关闭 y 轴的做标，并将其左右滚动。可以通过 axisLabel 组件来实现：

option = {
  // 开启 tooltip 组件
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  // 开启 dataZoom 组件
  dataZoom: [
    {
      type: 'slider',
      xAxisIndex: 0,
      start: 0,
      end: 100
    },
    {
      type: 'slider',
      yAxisIndex: 0,
      start: 0,
      end: 100
    }
  ],
  // 关闭 x 轴做标，并设置其上下滚动
  xAxis: {
    show: false,
    type: 'category',
    boundaryGap: false,
    axisLine: {onZero: false},
    data: data.map(function (item) {
      return item[0];
    })
  },
  yAxis: {
    type: 'value',
    axisLine: {onZero: false},
    // 关闭 y 轴做标，并设置其左右滚动
    axisLabel: {
      show: false
    }
  },
  // 其他配置项
  ...
};

这里将 x 轴的 axisLabel 设置为不可见，同时将 xAxis 的 show 属性设置为 false，表示关闭 x 轴做标。y 轴同理。

最后，需要在 tooltip 的 formatter 函数中显示 x 轴和 y 轴的值：

option = {
  // 开启 tooltip 组件
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    // 在 tooltip 中显示 x 轴和 y 轴的值
    formatter: function (params) {
      return params[0].name + '<br />' + params[0].value + ', ' + params[1].value;
    }
  },
  // 开启 dataZoom 组件
  dataZoom: [
    {
      type: 'slider',
      xAxisIndex: 0,
      start: 0,
      end: 100
    },
    {
      type: 'slider',
      yAxisIndex: 0,
      start: 0,
      end: 100
    }
  ],
  // 关闭 x 轴做标，并设置其上下滚动
  xAxis: {
    show: false,
    type: 'category',
    boundaryGap: false,
    axisLine: {onZero: false},
    data: data.map(function (item) {
      return item[0];
    })
  },
  yAxis: {
    type: 'value',
    axisLine: {onZero: false},
    // 关闭 y 轴做标，并设置其左右滚动
    axisLabel: {
      show: false
    }
  },
  // 其他配置项
  ...
};

这里在 formatter 函数中将 x 轴和 y 轴的值都显示出来了。具体的显示效果可以根据实际需求进行调整。