Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的

简介: Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的

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!

相关实践学习
基于MaxCompute的热门话题分析
Apsara Clouder大数据专项技能认证配套课程:基于MaxCompute的热门话题分析
相关文章
|
4月前
|
机器学习/深度学习 传感器 分布式计算
数据才是真救命的:聊聊如何用大数据提升灾难预警的精准度
数据才是真救命的:聊聊如何用大数据提升灾难预警的精准度
352 14
|
5月前
|
机器学习/深度学习 运维 监控
运维不怕事多,就怕没数据——用大数据喂饱你的运维策略
运维不怕事多,就怕没数据——用大数据喂饱你的运维策略
203 0
|
4月前
|
传感器 人工智能 监控
数据下田,庄稼不“瞎种”——聊聊大数据如何帮农业提效
数据下田,庄稼不“瞎种”——聊聊大数据如何帮农业提效
169 14
|
3月前
|
传感器 人工智能 监控
拔俗多模态跨尺度大数据AI分析平台:让复杂数据“开口说话”的智能引擎
在数字化时代,多模态跨尺度大数据AI分析平台应运而生,打破数据孤岛,融合图像、文本、视频等多源信息,贯通微观与宏观尺度,实现智能诊断、预测与决策,广泛应用于医疗、制造、金融等领域,推动AI从“看懂”到“会思考”的跃迁。
|
4月前
|
机器学习/深度学习 传感器 监控
吃得安心靠数据?聊聊用大数据盯紧咱们的餐桌安全
吃得安心靠数据?聊聊用大数据盯紧咱们的餐桌安全
174 1
|
4月前
|
数据采集 自动驾驶 机器人
数据喂得好,机器人才能学得快:大数据对智能机器人训练的真正影响
数据喂得好,机器人才能学得快:大数据对智能机器人训练的真正影响
300 1
|
5月前
|
机器学习/深度学习 监控 大数据
数据当“安全带”:金融市场如何用大数据玩转风险控制?
数据当“安全带”:金融市场如何用大数据玩转风险控制?
189 10
|
5月前
|
机器学习/深度学习 自然语言处理 监控
大数据如何影响新兴市场投资决策?——数据才是真正的风向标
大数据如何影响新兴市场投资决策?——数据才是真正的风向标
145 3
|
5月前
|
机器学习/深度学习 传感器 大数据
大数据真能治堵吗?聊聊交通行业用数据疏通“城市血管”
大数据真能治堵吗?聊聊交通行业用数据疏通“城市血管”
208 4
|
5月前
|
机器学习/深度学习 人工智能 大数据
从数据到决策:政府如何用大数据把事儿办得更明白?
从数据到决策:政府如何用大数据把事儿办得更明白?
137 0