vue中Echarts可横向滑动

在Vue中使用ECharts做图表时，如果你想要创建一个可以水平滑动的图表，通常是在设置图表的配置项时指定其宽度超过容器宽度，并添加适当的交互事件。你可以通过以下步骤实现：

1. 首先，在HTML结构中，给包含ECharts的元素设置足够的宽度，比如一个`div`：

<template>
  <div id="chart-container" class="echarts-container"></div>
</template>

<style scoped>
.echarts-container {
  width: 100%;
  height: 400px;
}
</style>

2. 然后，在你的Vue组件中，引入ECharts库并初始化图表，同时配置xAxis（横轴）：

<script setup>
import * as ECharts from 'echarts';

const chart = ref(null);
const data = ... // 你的数据

onMounted(() => {
  const options = {
    xAxis: {
      type: 'category', // 横向轴
      boundaryGap: false, // 关闭刻度线之间的空白
      data: Object.keys(data), // 刻度标签
    },
    yAxis: {},
    ... // 其他ECharts配置项
  };

  chart.value = new ECharts.Chart({
    container: '#chart-container',
    width: '100%', // 设置图表宽度为父元素宽度
    height: '400px',
    option: options,
  });
});
</script>

3. 添加滚动监听事件，当用户滑动时更新x轴的视图范围：

watch(
  () => document.getElementById('chart-container').scrollLeft,
  (value) => {
    if (chart.value) {
      chart.value.resize();
      chart.value.dispatchAction({
        type: 'dataZoom',
        start: value / document.getElementById('chart-container').clientWidth,
        end: (value + window.innerWidth) / document.getElementById('chart-container').clientWidth,
      });
    }
  },
  { immediate: true } // 初始化时也触发
);

这样，当你滚动图表容器时，图表会随着用户的操作而横向滑动。