uniapp中使用echarts折线图横坐标轴做成可以左右拖动的

在uniApp中，利用ECharts绘制折线图并使其横坐标轴支持左右拖动功能，你可以通过设置`xAxis`的属性来实现。首先，你需要引入ECharts库并在组件中创建一个ECharts实例，然后配置`xAxis`的属性：

<template>
  <view>
    <uni-charts :chart="chart" />
  </view>
</template>

<script setup>
import { onReady } from '@dcloudio/uni-app-plus';
import echarts from 'echarts';

onReady(() => {
  const chart = echarts.init(document.getElementById('chart'));

  // 配置横坐标轴
  const xAxisConfig = {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'], // 横坐标的标签数据
    axisDrag: true, // 开启拖拽
    axisPointer: {
      type: 'shadow' // 显示移动指示器
    },
    boundaryGap: false, // 要让轴头跟随鼠标移动
    splitLine: { show: false }, // 关闭刻度线
  };

  // 绑定事件处理函数，监听横坐标轴的拖动
  chart.on('axisdragend', (params) => {
    xAxisConfig.data = params.value; // 更新横坐标数据
    chart.setOption({
      xAxis: xAxisConfig,
    });
  });

  // 初始化图表选项
  const option = {
    xAxis: xAxisConfig,
    yAxis: {}, // 配置纵坐标...
    series: [{ // 数据系列...
    }],
  };
  
  chart.setOption(option);
});
</script>

在上述代码中，`axisDrag`属性开启轴拖拽功能，`boundaryGap`设为false使得轴头会随着鼠标的移动而改变位置。记得给你的视图（如div）添加id，比如`<div id="chart"></div>`。