一. 布景
ECharts 作为一款功能强大的前端数据可视化库，为开发者供给了丰富多样的图表类型和灵敏的装备选项，广泛应用于各行业的数据展现和分析中。在当今数字化的年代，数据量呈现爆炸性添加，大规模数据的可视化需求变得越来越火急。
可是，当数据量达到十万级乃至更高等级时，ECharts 的烘托功能也面临应战。传统的烘托方法或许会导致页面卡顿、加载时刻过长等问题，影响用户体会。因而，针对 ECharts 烘托大规模数据时的功能问题，咱们火急需要讨论并实践适用的优化计划。
本篇文章将从实践动身，深入讨论 ECharts 烘托十万级数据的功能优化计划，经过实践案例和经验总结，讨论怎么提高大规模数据可视化的烘托效率和用户体会。
经过本篇文章，我希望能够帮助咱们更好地理解 ECharts 烘托十万级数据的功能应战，并掌握实用的优化办法，然后完成更流通、高效的大规模数据可视化展现。
二. 为什么要进行烘托优化？
在我的一个实践项目中，有一个应用场景是：用户要经过时刻规模选择框，查询最近半年的数据量，进而经过 ECharts 折线图一次性烘托大约十万 以上的数据量。可想而知，数据量大带来的用户体会作用会非常欠好，如下图所示：
- 接口恳求回来的数据量大约有七万条数据，如下图所示：
- 接口恳求时刻为 11 秒，数据包的巨细为 3.6 MB，如下图所示：
- ECharts 终究烘托作用如下所示：
如上图所示的作用反响，用户体会作用非常欠好，网络恳求 10 秒以上，图表烘托至少要 5 秒以上，烘托成功后用户操作卡顿、延迟还特别严重。
可是这并不能说明 ECharts 图表烘托功能欠好，而是有些时分 ECharts 有供给的计划，可是咱们并没有依照官方策省略执行，去优化。图中面临的数据量才是十万级，相比较而言，在现在大数据的年代，百万级、千万级的数据量也会经常出现在咱们的日常项目开发中，那么试想一下，假如还是以上这种方法烘托，我相信只要溃散一条路能够走。
因而，在 ECharts 图表烘托这种场景下，面临庞大的数据量时，咱们应该怎么进行优化？提高用户体会呢？接下来咱们就聊一下在实践项目中 ECharts 烘托海量数据的几个优化计划。
三. 计划：数据分段烘托
1. 计划简介
随着数据量的添加，直接一次性加载所有数据或许导致页面功能下降和用户体会变差，因而考虑将数据分段加载也是一种常见的功能优化计划。
ECharts dataZoom 组件常用于区域缩放，然后让用户能自在关注细节的数据信息，或者概览数据全体，或者去除离群点的影响。为了能让 ECharts 避免一次性烘托的数据量过大，因而能够考虑运用 dataZoom 的区域缩放特点完成首次烘托 ECharts 图表时就进行区域烘托，削减全体烘托带来的功能消耗。
2. 完成过程
dataZoom 组件供给了几个特点，运用这几个特点能够操控图表烘托时的功能问题，如下所示：
-
start: 数据窗口规模的开始百分比。规模是：0 ~ 100。表明 0% ~ 100%。 -
end: 数据窗口规模的结束百分比。规模是：0 ~ 100。 -
minSpan: 用于约束窗口巨细的最小值（百分比值），取值规模是 0 ~ 100。 -
maxSpan: 用于约束窗口巨细的最大值（百分比值），取值规模是 0 ~ 100。
详细计划是运用 start 和 end 操控 ECharts 图表初度烘托时滑块所处的位置以及数据窗口规模，运用 minSpan 和 maxSpan 用于约束窗口巨细的最小值和最大值，终究约束的图表的可视区域显现规模，如下代码所示：
var option = {
dataZoom: [
{
type: "slider",
xAxisIndex: [0],
start: 0,
end: 1,
minSpan: 0,
maxSpan: 10,
},
],
};
以上代码表明 ECharts 图表初始化时，数据窗口从 x 轴 0 ~ 1% 规模内显现，最大的窗口显现规模为 10%
3. 实践作用
经过装备 dataZoom 区域缩放组件，完成数据分段加载的完成计划，能够有用下降页面加载时刻，削减资源占用，提高用户体会。大幅度削减一次性加载大数据量带来的功能压力，完成愈加流通的大规模数据可视化展现。
终究完成作用图如下图所示：
4. 优缺点
以上的这种计划，优缺点很明显，如下几点总结：
长处
能够很好的处理 ECharts 首次进行大数据量烘托造成的卡顿体会问题，不需要额定的数据处理，只需要经过简单的装备 dataZoom 缩放组件就能够完成
缺点
-
无法进行大局概览数据，只能分段检查数据
-
或许需要根据数据量动态的装备特点值，start、end、minSpan 和 maxSpan
四. 计划：降采样战略
1. 计划简介
ECharts 还供给了另一种提高烘托功能的方法，那就是降采样战略 series-line.sampling，经过装备sampling采样参数能够告知 ECharts 依照哪一种采样战略，能够有用的优化图表的制作效率。
折线图在数据量远大于像素点时分的降采样战略，敞开后能够有用的优化图表的制作效率，默认关闭，也就是悉数制作不过滤数据点。
2. 完成过程
sampling 特点供给了几个可选值，装备不同的值能够有用的优化图表的制作效率，如下所示：
sampling 的可选值有以下几个：
-
lttb: 采用Largest-Triangle-Three-Bucket算法，能够最大程度确保采样后线条的趋势，形状和极值。 -
average: 取过滤点的平均值 -
min: 取过滤点的最小值 -
max: 取过滤点的最大值 -
minmax: 取过滤点绝对值的最大极值 (从 v5.5.0 开始支撑) -
sum: 取过滤点的和
详细计划是装备 series 的 sampling，终究表明运用的是 ECharts 的哪一种采样战略，ECharts 内部机制完成优化战略：
var option = {
series: {
type: "line",
sampling: "lttb", // 最大程度确保采样后线条的趋势，形状和极值。
},
};
以上代码表明运用 ‘lttb’ 降采样战略，完成下降功能消耗的作用。
3. 实践作用
经过装备 series 的 sampling 为 lttb 形式，比照之前的曲线，能够最大程度确保采样后线条的趋势，形状和极值，如下图所示：
比照之前的作用，能够说是体会作用有质的飞跃，终究完成作用图如下图所示：
4. 优缺点
长处
- 运用简单，ECharts 内部降采样算法，作用显著
- 能够完整的将曲线趋势展现出来，和原曲线基本共同
缺点
- 并不是展现的所有点，会删去一些无用的点，确保烘托功能
- 最大程度确保采样后线条的趋势，形状和极值，可是某些情况下，极值有误差，测验中发现
说明：本项目只运用了 lttb 和 minmax 这两种采样战略，相比照来说 lttb 有更流程的功能体会，可是测验中发现在一些情况下，极值出现误差，也就是最大值最小值显现失误，可是运用 minmax 正常，原因未排查，如下图所示：
其他的降采样战略并不适合本项目，因而没有进行详细测验，感兴趣的同学能够按需进行研究！
五. 其他拓宽
1. 服务器提速
-
优化数据结构，精简数据返回字段，下降数据包巨细
-
敞开 gzip 压缩，加快海量数据下载速度
2. 数据处理
-
数据聚合：关于特别密集的数据点，运用聚合算法在源头对数据降采样，进行数据聚合，削减烘托的数据点数量。
-
数据过滤：数据中存在一些无关的信息或数据噪音，服务端对数据进行过滤，只需要保存有用的数据即可，除掉无效的数据。
六. 总结
在本篇文章中，我首要介绍了在实践项目开发中，我遇到的 ECharts 烘托十万级 数据的功能优化计划，由此作为文章总结分享出来，首要想和咱们沟通一下怎么处理在海量数据可视化中面临的功能应战。
在实践应用中，经过数据分段烘托和官方降采样的完成计划，能够看到在优化烘托海量数据时，它们是有用的战略之一。除了以上介绍的方法外，其实还能够结合数据聚合处理、延迟烘托、硬件加速、Web Worker 等多种优化手法，综合运用以完成更高效的海量数据可视化展现。
烘托十万级 的数据量是一个应战性的使命，但经过合理的优化计划和技巧，能够提高页面功能，改进用户体会，完成数据可视化的更好展现作用。
本篇文章是在实践项目中的一些实践以及考虑，关于 ECharts 海量数据的烘托功能优化，还有更多的或许性，也还有更多优秀的完成计划。假如你有更好的完成计划，欢迎分享沟通。
资源文档
假如您感觉文章还不错，点个赞再走吧！
