一：原因

在项目开发过程中，有时候会遇到echars进行渲染数据，面对海量数据，我们需要怎么处理呢，如果一次性全部渲染，那么页面就会卡顿，空白很久，才会渲染完成，

二：方案

1：Datazoom（数据分段加载）主要是用于分区域渲染，然后自然的关注数据的细节，或者浏览整体

dataZoom: [{
      type: 'slider', // 值：inside slider
      start: 0, // 数据窗口范围的起始百分比
      end: 100, // 数据窗口范围的结束百分比
      realtime: true, // 是否实时更新 true/false
      xAxisIndex: 0, // 表示特定的X轴索引
      minSpan: 0, // 用于限制窗口大小的最小值（百分比值），取值范围是 0 ~ 100。
      maxSpan: 100, // // 用于限制窗口大小的最大值（百分比值），取值范围是 0 ~ 100。
      // 特别提醒：start: 设置为0, 说明是从第1条数据开始的; 那么xAxisIndex就必须是0; 因为xAxisIndex不是0，他们就互相矛盾了。
      filterMode: 'filter'
}, {
      type: 'slider',
      start: 0,
      end: 100,
      realtime: true,
      yAxisIndex: 0, // 表示特定的y轴索引
      minSpan: 0,
      maxSpan: 100,
      filterMode: 'empty'
}]

2：Sampling（降采样策略），减少数据点的数量，减少渲染负担，以提高性能或提供更清晰的视觉表现

series: [{
      name: '销量',
      data: sampledData,
      type: 'bar',
      sampling: 'lttb',
      // sampling的值：
      // 'lttb' 采用 Largest-Triangle-Three-Bucket 算法，可以最大程度保证采样后线条的趋势，形状和极值。
      // 'average' 取过滤点的平均值
      // 'min' 取过滤点的最小值
      // 'max' 取过滤点的最大值
      // 'minmax' 取过滤点绝对值的最大极值 (从 v5.5.0 开始支持)
      // 'sum' 取过滤点的和
}, {
      name: '金额',
      data: sampledData,
      type: 'line'
}],

三：完整代码

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ChartComponent',
  props: {
    echartsdata: Array // 假设传入的数据是数组
  },
  mounted () {
    this.initChart()
  },
  watch: {
    echartsdata (newval, oldval) {
      this.initChart()
    }
  },
  methods: {
    initChart () {
      const chart = echarts.init(this.$refs.chart)
      const sampledData = this.echartsdata
      const option = {
        // ECharts 配置项
        xAxis: {
          type: 'category'
          // data: Array.from({ length: sampledData.length }, (_, i) => i)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '销量',
          data: sampledData,
          type: 'bar',
          sampling: 'min',
          // 'lttb' 采用 Largest-Triangle-Three-Bucket 算法，可以最大程度保证采样后线条的趋势，形状和极值。
          // 'average' 取过滤点的平均值
          // 'min' 取过滤点的最小值
          // 'max' 取过滤点的最大值
          // 'minmax' 取过滤点绝对值的最大极值 (从 v5.5.0 开始支持)
          // 'sum' 取过滤点的和
        }, {
          name: '金额',
          data: sampledData,
          type: 'line'
          // sampling: 'lttb', // 最大程度保证采样后的线条趋势。
          // sampleSize: 10
        }],
        dataZoom: [{
          type: 'slider', // 值：inside slider
          start: 0, // 数据窗口范围的起始百分比
          end: 100, // 数据窗口范围的结束百分比
          realtime: true, // 是否实时更新 true/false
          xAxisIndex: 0, // 表示特定的X轴索引
          minSpan: 0, // 用于限制窗口大小的最小值（百分比值），取值范围是 0 ~ 100。
          maxSpan: 100, // // 用于限制窗口大小的最大值（百分比值），取值范围是 0 ~ 100。
          // 特别提醒：start: 设置为0, 说明是从第1条数据开始的; 那么xAxisIndex就必须是0; 因为xAxisIndex不是0，他们就互相矛盾了。
          filterMode: 'filter'
        }, {
          type: 'slider',
          start: 0,
          end: 100,
          realtime: true,
          yAxisIndex: 0, // 表示特定的y轴索引
          minSpan: 0,
          maxSpan: 100,
          filterMode: 'empty'
        }]
      }
      chart.setOption(option)
    }
  }
}
</script>

四：优缺点

1：DataZoom（数据分段加载）

A：优点

       配置简单：通过设置 start 和 end 属性，可以控制图表渲染的数据范围，从而提高性能。

       流畅渲染：页面渲染速度非常快，能够实现快速渲染大量数据而不影响用户体验。

B：缺点

   局部数据展示：只能查看指定局部的数据，无法查看整体数据，限制了用户对数据整体趋势的把握。

2：Sampling（降采样策略）

A：优点

       整体趋势可见：允许用户看到数据的整体趋势，而不是仅限于局部数据。

       减少数据点：通过减少数据点的数量，减轻渲染负担，提高性能，尤其是在数据点非常多的折线图中效果明显。

B：缺点

       数据丢失：能会导致部分数据丢失，这对于需要精确数据的用户来说可能是一个问题。

       tooltip功能可能受限：由于数据点的减少，一些图表的交互功能，如 tooltip，可能无法实现或受到影响。

五：总结

   1：DataZoom 适合于需要快速渲染大量数据的场景，而 Sampling 更适用于需要观察数据整体趋势的情况

四：