appendData对折线图起作用吗?在反复看官方的说明后,带着这样的怀疑,做了一下测试:
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
模拟数据
//模拟数据; var dataList = [], dataName = []; var newData = 1000000; for (var i = 1; i < newData; i++) { dataName.push(i); //dataList.push({name: i, value: i + parseInt(Math.random() * 100)}); dataList.push([i, i + parseInt(Math.random() * 100)]); }
appendData大数据量分片加载数据和增量渲染代码:
var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, dataZoom: [{ //show: true, //type: "inside", start: 50, end: 100, bottom: 10, }], xAxis: { data: dataName }, yAxis: {}, series: [{ data: [], type: 'line', }] }; myChart.setOption(option, true); window.addEventListener("resize", function () { myChart.resize(); }); myChart.appendData({ seriesIndex: 0, data: dataList, }); myChart.resize();
常规代码:
//渲染图表; var myChart = echarts.init(document.getElementById("container")); var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, dataZoom: [{ //show: true, //type: "inside", start: 50, end: 100, bottom: 10, }], xAxis: { data: dataName }, yAxis: {}, series: [{ data: dataList, type: 'line', }] }; myChart.setOption(option, true); window.addEventListener("resize", function () { myChart.resize(); });
效率对比
10万模拟数据时间
- 常规加载
- 分片加载数据增量渲染
100万模拟数据时间
- 常规加载
- 分片加载数据增量渲染
结论
1.对于折线图来说,appendData大数据量分片加载数据增量渲染和常规的方法没多大区别;
2.某种程序上来说,常规比appendData时间更优;
3.官方应该没骗我,appendData对折线图是无效的。
目前支持的图有:ECharts 基础版本的 散点图(scatter) 和线图(lines)。ECharts GL 的 散点图(scatterGL)、线图(linesGL) 和可视化建筑群(polygons3D)。
Done!