Echarts图表怎么处理十万级别的数据，放大缩小不卡顿，就像德芙一样的丝滑，嗖~嗖~嗖~的

第一步首先要开始Echrats的大数据模式。

开启大数据模式会流畅很多。large: true,

第二步，开始Echrats的降采样模式。

在series中设置sampling: 'lttb'后，ECharts会在渲染过程中自动应用这种降采样方法，使得最终显示的图表更加清晰，减少了数据点的数量。

第三步，在开始渲染的时候interval间隔设置大一点

• interval: 指定轴上标签的显示间隔。它基于标签在所有可能标签数组中的索引来确定哪些标签会被显示。
• 

因为他是间隔才采集一个点，所以当图缩小的时候就不会详细的显示每个点了，这里我们就需要处理一下。定义变量xAxisInterval

下面是初始化表的代码

// 初始化概览图表

function initOverviewChart(chartElement) {

  const myChart = echarts.init(chartElement);

  const option = createOverviewChartOption();

  myChart.setOption(option);

  myChart.on("datazoom", handleDataZoomChange); // 监听 dataZoom 的变化事件

  myChart.on("click", handleChartClick); // 添加点击事件来更新概览图表的选择区间

}

// 创建概览图表选项

const xAxisInterval = ref(); //初始化5秒渲染一个点

function createOverviewChartOption() {

  // xAxis中间

  let xAxisCenter = [];

  if (tableData.value.length) {

    xAxisCenter = tableData.value.map((e) => [

      {

        xAxis: e.start * 10,

      },

      {

        xAxis: e.end * 10,

      },

    ]);