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

本文涉及的产品
云原生大数据计算服务 MaxCompute,5000CU*H 100GB 3个月
云原生大数据计算服务MaxCompute,500CU*H 100GB 3个月
简介: 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的热门话题分析
本实验围绕社交用户发布的文章做了详尽的分析,通过分析能得到用户群体年龄分布,性别分布,地理位置分布,以及热门话题的热度。
SaaS 模式云数据仓库必修课
本课程由阿里云开发者社区和阿里云大数据团队共同出品,是SaaS模式云原生数据仓库领导者MaxCompute核心课程。本课程由阿里云资深产品和技术专家们从概念到方法,从场景到实践,体系化的将阿里巴巴飞天大数据平台10多年的经过验证的方法与实践深入浅出的讲给开发者们。帮助大数据开发者快速了解并掌握SaaS模式的云原生的数据仓库,助力开发者学习了解先进的技术栈,并能在实际业务中敏捷的进行大数据分析,赋能企业业务。 通过本课程可以了解SaaS模式云原生数据仓库领导者MaxCompute核心功能及典型适用场景,可应用MaxCompute实现数仓搭建,快速进行大数据分析。适合大数据工程师、大数据分析师 大量数据需要处理、存储和管理,需要搭建数据仓库?学它! 没有足够人员和经验来运维大数据平台,不想自建IDC买机器,需要免运维的大数据平台?会SQL就等于会大数据?学它! 想知道大数据用得对不对,想用更少的钱得到持续演进的数仓能力?获得极致弹性的计算资源和更好的性能,以及持续保护数据安全的生产环境?学它! 想要获得灵活的分析能力,快速洞察数据规律特征?想要兼得数据湖的灵活性与数据仓库的成长性?学它! 出品人:阿里云大数据产品及研发团队专家 产品 MaxCompute 官网 https://www.aliyun.com/product/odps&nbsp;
相关文章
|
3月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
348 1
|
4月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
204 23
echarts地图数据信息流向图效果
|
3月前
|
存储 SQL 分布式计算
大数据-162 Apache Kylin 全量增量Cube的构建 Segment 超详细记录 多图
大数据-162 Apache Kylin 全量增量Cube的构建 Segment 超详细记录 多图
74 3
|
3月前
|
Java 大数据 数据库连接
大数据-163 Apache Kylin 全量增量Cube的构建 手动触发合并 JDBC 操作 Scala
大数据-163 Apache Kylin 全量增量Cube的构建 手动触发合并 JDBC 操作 Scala
46 2
大数据-163 Apache Kylin 全量增量Cube的构建 手动触发合并 JDBC 操作 Scala
|
3月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
298 2
|
3月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
762 0
|
3月前
|
存储 机器学习/深度学习 分布式计算
大数据技术——解锁数据的力量,引领未来趋势
【10月更文挑战第5天】大数据技术——解锁数据的力量,引领未来趋势
|
2月前
|
存储 分布式计算 数据挖掘
数据架构 ODPS 是什么?
数据架构 ODPS 是什么?
436 7
|
2月前
|
存储 分布式计算 大数据
大数据 优化数据读取
【11月更文挑战第4天】
59 2
|
2月前
|
数据采集 监控 数据管理
数据治理之道:大数据平台的搭建与数据质量管理
【10月更文挑战第26天】随着信息技术的发展,数据成为企业核心资源。本文探讨大数据平台的搭建与数据质量管理,包括选择合适架构、数据处理与分析能力、数据质量标准与监控机制、数据清洗与校验及元数据管理,为企业数据治理提供参考。
100 1

热门文章

最新文章