js实现，鼠标在折线图上滑动显示tootip和axispointer，鼠标松开不显示axispointer和tooltip

实现这个功能可以借助 echarts 库，具体实现步骤如下：

1. 引入 echarts 库和对应的主题和插件：

<!-- 引入 echarts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 引入 echarts 主题 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>
<!-- 引入 echarts-axispointer 插件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<!-- 引入 echarts-tooltip 插件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>

2. 创建一个 div 作为 echarts 的容器：

<div id="chart" style="width: 600px; height: 400px;"></div>

3. 在 js 中初始化 echarts 实例，并设置相应的配置项：

// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 设置图表配置项
var option = {
  // ... 其他配置项

  // 配置 tooltip
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      animation: false,
      label: {
        backgroundColor: '#505765'
      }
    },
    formatter: function (params) {
      // ... 格式化 tooltip 显示内容
    }
  },

  // 配置 axisPointer
  axisPointer: {
    link: {xAxisIndex: 'all'},
    label: {
      backgroundColor: '#777'
    }
  },

  // ... 其他配置项
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

4. 注册鼠标移动和鼠标松开事件，根据事件触发时的参数来控制 tooltip 和 axisPointer 的显示：

// 注册鼠标移动事件
myChart.on('mousemove', function (params) {
  // 显示 tooltip 和 axisPointer
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0, // 数据系列的索引
    dataIndex: params.dataIndex // 数据项的索引
  });
});

// 注册鼠标松开事件
myChart.on('mouseout', function (params) {
  // 隐藏 tooltip 和 axisPointer
  myChart.dispatchAction({
    type: 'hideTip'
  });
});

这样，当鼠标在折线图上滑动时，会显示 tooltip 和 axisPointer，鼠标松开后会隐藏它们。