echarts 大量数据渲染优化

数据分段渲染 dataZoom

dataZoom: [{
    type: 'slider',
    start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
    end: 20 // 初始展示20%数据, 范围是：0 ~ 100。表示 0% ~ 100%。
    minSpan: 0, // 用于限制窗口大小的最小值（百分比值），取值范围是 0 ~ 100。
    maxSpan: 10, // 用于限制窗口大小的最大值（百分比值），取值范围是 0 ~ 100。
   
}],
series: {
    progressive: 2000,  // 渐进式渲染阈值
    progressiveThreshold: 5000 // 启用渐进渲染
},

dataZoom处理海量数据的优缺点

优点：配置简单；
缺点：只能看指定局部的数据；无法看整体数据

降采样策略 sampling

series: [
    {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        sampling: "lttb",
        data: emailData
    },
  ]

• sampling 的可选值有以下几个： lttb: 采用 Largest-Triangle-Three-Bucket 算法，可以最大程度保证采样后线条的趋势，形状和极值。 average: 取过滤点的平均值 min: 取过滤点的最小值 max: 取过滤点的最大值 minmax: 取过滤点绝对值的最大极值 (从 v5.5.0 开始支持) sum: 取过滤点的和

sampling降采样策略的优缺点

优点：可以看见整体的趋势；
缺点：部分数据丢失；tooltip功能可能实现不了

测试数据

// useData.js
export default () => {
  const list = Array.from({ length: 10000 });

  const xAxisData = [];
  const emailData = [];
  const unionAdsData = [];
  const videoAdsData = [];

  list.forEach((_, index) => {
    xAxisData.push(`mon-${index}`);
    emailData.push(100 + parseInt(Math.random() * 30 * index));
    unionAdsData.push(150 + parseInt(Math.random() * 20 * index));
    videoAdsData.push(200 + parseInt(Math.random() * 10 * index));
  });
  return {
    xAxisData,
    emailData,
    unionAdsData,
    videoAdsData,
  }
};