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,

      },

    ]);

  }

  // xAxis边框虚线数据

  let xAxisBoundary = [];

  if (tableData.value.length) {

    xAxisBoundary = tableData.value.flatMap((e) => [

      { xAxis: e.start * 10 },

      { xAxis: e.end * 10 },

    ]);

  }

  return {

    xAxis: {

      type: "category",

      data: dataX.value,

      axisLabel: {

        interval: xAxisInterval,

      },

      boundaryGap: false,

    },

    yAxis: {

      type: "value",

      min: 0,

      max: 120,

      axisLabel: {

        formatter: "{value} km",

      },

    },

    // 使用轴触发

    tooltip: {

      trigger: "axis",

      axisPointer: {

        // 坐标轴指示器，坐标轴触发有效

        type: "cross", // 默认为直线，可选为：'line' | 'shadow'

      },

    },

    // 布局样式

    grid: {

      top: "5%",

      left: "4%",

      right: "0%",

      height: "60%",

    },

    series: [

      {

        data: dataY.value,

        type: "line",

        sampling: "lttb",

        smooth: true,

        large: true,

        markLine: {

          symbol: ["none", "none"],

          label: { show: false },

          data: xAxisBoundary,

        },

        // 添加 markArea

        markArea: {

          silent: true,

          itemStyle: {

            color: "rgba(231, 239, 255, 0.6)", // 设置背景颜色

          },

          data: xAxisCenter,

        },

      },

    ],

    dataZoom: [

      {

        type: "inside",

        start: 0,

        end: 100,

      },

      {

        // show: true,

        start: 0,

        height: 150,

        bottom: 10,

        end: 100,

        handleSize: "0%",

        handleStyle: {

          color: "#d3dee5",

        },

        textStyle: {

          color: "#fff",

        },

        borderColor: "#90979c",

      },

    ],

    markPoint: {

      symbol: "triangle",

      symbolSize: 10,

      data: [

        { name: "start", value: selectedRange.value[0] },

        { name: "end", value: selectedRange.value[1] },

      ],

    },

    // 添加 markArea

    markArea: {

      silent: true,

      itemStyle: {

        color: "rgba(255, 255, 0, 0.3)", // 设置背景颜色

      },

      data: [[{ name: "start" }, { name: "end" }]],

    },

  };

}

第四步，在dataZoom中做判断。

这里的dataZoom 是一个组件，用于实现数据区域缩放的功能。这个功能允许用户通过拖拽或滑动的方式放大或缩小图表中的数据范围，以便更细致地查看特定的数据区间。这对于具有大量数据点的图表尤其有用。

当图缩放到1%的时候xAxisInterval的值就为0，就显示所有的间隔点，不然的话就199个点中显示一个。下面是dataZoom的代码。

// 处理 dataZoom 的变化

function handleDataZoomChange(e) {

  let start = 0;

  let end = 0;

  if (e.start) {

    start = e.start;

  }

  if (e.end) {

    end = e.end;

  }

  if (e?.batch && e?.batch[0]) {

    start = e.batch[0].start;

    end = e.batch[0].end;

  }

  const zoomRange = end - start;

  xAxisInterval.value = zoomRange < 1 ? 0 : 199; // 如果缩放范围小于0.5%，则显示所有数据标签

  // 更新图表配置

  const updatedOption = {

    xAxis: {

      axisLabel: {

        interval: xAxisInterval.value,

      },

    },

  };

  echarts.getInstanceByDom(overviewChartRef.value)?.setOption(updatedOption);

}