当使用 ECharts 渲染大规模数据时，可能会出现性能问题例如渲染卡顿。这通常是因为浏览器在处理大量的 DOM 节点时会变得相当缓慢。以下有几种可能的解决办法：
- 关闭动画：ECharts默认的动画效果会消耗一些性能，对于大数据量的图表，可以尝试关闭动画。
let option = {
animation: false,
series: [
// ...
]
};
echarts.setOption(option);
- 使用 large 模式： ECharts 在 series 中提供了一个 large 选项，当数据量特别大（如超过千条数据）时，可以尝试开启 large 模式，此模式下会对绘制进行优化。
let option = {
series: [
{
type: 'scatter',
large: true,
data: largeData,
},
],
};
echarts.setOption(option);
- 启用进度渲染：对于特别大的数据集，我们可以启用 ECharts 的渲染进度条。这可以让用户知道渲染的进度，同时也可以避免浏览器在渲染过程中出现无响应的现象。
这需要在初始化 ECharts 实例时，将 option 中的 progressive 和 progressiveThreshold 属性设置为合适的值。在数据量大于 progressiveThreshold 时，图表会启用渐进渲染。
let option = {
series: [{
type: 'lines',
data: largeData,
// 开启渐进式渲染
progressive: 2000,
// 渲染阈值，大于此值则启动渐进渲染
progressiveThreshold: 5000,
}],
};
echarts.setOption(option);
注意：这些优化方法只能在一定程度上提升性能，并不能完全解决在数据量极大的情况下的性能问题。数据量过大时还可以考虑下面的处理方式
数据进行筛选和抽样来减少渲染点数
-
简单随机抽样
在这个例子中，我们首先抓取所有的原始数据，然后从中随机抽取一定数量的样本。这会确保所有的数据都有相同的被选择为样本的机会。
const rawData = fetchAllData(); // 获取所有的原始数据
const sampledData = [];
const sampleSize = 1000; // 设置我们想抽取的样本的数量
// 循环我们想抽取的样本的数量
for (let i = 0; i < sampleSize; i++) {
// 随机地获取一个原始数据的索引
const index = Math.floor(Math.random() * rawData.length);
// 使用这个随机索引抽取一个样本，并添加到样本的数组
sampledData.push(rawData[index]);
}
// 现在 sampledData 数组包含了我们的随机样本
方法定义
/**
* This method is used to perform simple random sampling from the raw data.
* @returns {Array} Sampled data
*/
function sampledData() {
// 获取所有的原始数据
const rawData = fetchAllData();
// 初始化一个数组用作存放随机抽取的样本
const sampledData = [];
// 设置我们想要抽取的样本数量
const sampleSize = 1000;
// 循环sampleSize次，每次抽取一个样本
for (let i = 0; i < sampleSize; i++) {
// 从原始数据中随机选取一个索引
const index = Math.floor(Math.random() * rawData.length);
// 使用这个随机索引抽取一个样本，并添加到样本数组中
sampledData.push(rawData[index]);
}
// 返回抽取的样本数组
return sampledData;
}
这个sampledData函数使用了简单随机抽样的方法，从原始数据中抽取样本。所有的原始数据都有相同的被抽取的概率。这个函数首先获取所有的原始数据，然后选择要抽取的样本的数量。然后它在每个循环迭代中使用Math.random()产生一个随机数作为索引，这个随机索引用来从原始数据中选择样本。这个函数最后返回抽取的样本数组。
-
系统抽样
在系统抽样中，我们按照一定的间隔选择样本。例如，我们可以每10个数据抽取一个。这种方法可以在保留数据的整体趋势的同时，大大减少数据的数量。
const rawData = fetchAllData(); // 获取所有原始数据
const sampledData = [];
const interval = 10; // 设置我们选择样本的间隔
// 从原始数据中选择样本
for (let i = 0; i < rawData.length; i += interval) {
sampledData.push(rawData[i]);
}
// 现在，sampledData 数组已经包含了选择的样本
方法定义
/**
* This method is used to perform systematic sampling from the raw data.
* @returns {Array} Sampled data
*/
function sampledData() {
// 获取所有的原始数据
const rawData = fetchAllData();
// 初始化一个数组用作存放选择的样本
const sampledData = [];
// 设置我们选择样本的间隔
const interval = 10;
// 按照给定的间隔，从原始数据中选择样本
for (let i = 0; i < rawData.length; i += interval) {
// 在每个间隔上，将数据添加到样本数组中
sampledData.push(rawData[i]);
}
// 返回选择的样本数组
return sampledData;
}
在上述sampledData函数中，我们实现了系统抽样方法。该方法按照预定的间隔（例如，每隔10个数据挑选一个）从原始数据中选择样本。这种方法既保留了数据的整体趋势，又显著减少了数据数量。
-
分层抽样
分层抽样首先需要将数据角色分层。这种情况下，我们可能按一定的规则把数据分为几个层次，比如按照某个特征的区间分层。然后，从每一层中随机抽取样本。我们可以保证我们的样本中含有所有不同层的数据。
const rawData = fetchAllData(); // 获取所有原始数据
const sampledData = [];
// 假设我们有三个层，每个层的数据量均一致
const layers = splitDataIntoLayers(rawData, 3); // 函数自定义，用于数据分层
const samplePerLayer = 100;
layers.forEach(layerData => {
for (let i = 0; i < samplePerLayer; i++) {
const index = Math.floor(Math.random() * layerData.length);
sampledData.push(layerData[index]);
}
});
// 现在，sampledData 数组包含了抽样的数据，这些数据等分自每个数据层
方法定义
const _ = require('lodash');
const dfd = require("danfojs-node");
// 假设我们有一个名为df的dataframe， 我们想根据'income' column把它分层
let df = new dfd.DataFrame(/*your data*/);
// 先把 'income'分成三类
let bins = [0, 1.5, 3.0, 4.5, 6, Infinity];
let labels = [1, 2, 3, 4, 5];
df['income_cat'] = df['income'].cut(bins, labels);
// Stratified sampling on 'income_cat'
let incomeCat = df['income_cat'].value_counts();
let trainSet = new dfd.DataFrame([], {columns: df.columns});
let testSet = new dfd.DataFrame([], {columns: df.columns});
// Get 80% train and 20% test for each category
for (let label in incomeCat) {
let size = incomeCat[label];
let sampleSize = Math.round(size * 0.8);
let temp = df[df['income_cat'].eq(label)];
let trainSample = temp.sample({n: sampleSize});
let rest = temp.iloc[trainSample.index, 'index'];
trainSet = trainSet.concat(trainSample);
testSet = testSet.concat(rest);
}
// Remove 'income_cat' to get the data back to its original state
trainSet = trainSet.drop(['income_cat'], {axis: 1});
testSet = testSet.drop(['income_cat'], {axis: 1});
trainSet和testSet分别包含了训练样本和测试样本，里面的样本都是根据’income’列进行分层的。
-
聚类抽样
聚类抽样需要我们首先确定数据属于哪个聚类。例如，我们可以使用一种聚类算法如 K-均值聚类 来确定每个数据点的类别。然后，我们就可以从每个类别中随机抽取样本了。
const rawData = fetchAllData(); // 获取所有原始数据
const sampledData = [];
// 假设我们有三个类别，并且我们已经用 K-均值 聚类算法确定了每个数据点的类别
const clusters = splitDataIntoClusters(rawData, 3); // 函数自定义，用于数据聚类
const samplePerCluster = 100;
clusters.forEach(clusterData => {
for (let i = 0; i < samplePerCluster; i++) {
const index = Math.floor(Math.random() * clusterData.length);
sampledData.push(clusterData[index]);
}
});
方法定义
// 'df-js' is a package that simulates pandas in JavaScript
const DataFrame = require('df-js');
const kmeans = require('ml-kmeans');
// Assume we have matrix X for our data
let X = /* your data */;
// fit the model
let predictions = kmeans(X, 3, {initialization: 'random', seed: 42});
// Add the cluster labels for each data point to the dataframe
let df = new DataFrame(/* your data */);
df.addColumn('cluster', predictions.clusters);
// Extract a random sample from each cluster
let sample_1 = df.subset(df.get('cluster').eq(1)).sample(100);
let sample_2 = df.subset(df.get('cluster').eq(2)).sample(100);
let sample_3 = df.subset(df.get('cluster').eq(3)).sample(100);
// Combine the samples to create the final sample
let final_sample = sample_1.concat(sample_2, sample_3);
注意，这份代码假设你的数据在一个DataFrame对象中。df-js是一个非常简洁的库用来处理类似这样的数据结构，但它仍然在开发中，可能无法处理所有的情况。
**
总结
**
正确选择并使用将大大影响你的的效果，因此你可能需要对你的数据和问题有深入的了解，以便能够正确选择和应用这些工具。
以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！
5575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
