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!

相关实践学习
简单用户画像分析
本场景主要介绍基于海量日志数据进行简单用户画像分析为背景,如何通过使用DataWorks完成数据采集 、加工数据、配置数据质量监控和数据可视化展现等任务。
SaaS 模式云数据仓库必修课
本课程由阿里云开发者社区和阿里云大数据团队共同出品,是SaaS模式云原生数据仓库领导者MaxCompute核心课程。本课程由阿里云资深产品和技术专家们从概念到方法,从场景到实践,体系化的将阿里巴巴飞天大数据平台10多年的经过验证的方法与实践深入浅出的讲给开发者们。帮助大数据开发者快速了解并掌握SaaS模式的云原生的数据仓库,助力开发者学习了解先进的技术栈,并能在实际业务中敏捷的进行大数据分析,赋能企业业务。 通过本课程可以了解SaaS模式云原生数据仓库领导者MaxCompute核心功能及典型适用场景,可应用MaxCompute实现数仓搭建,快速进行大数据分析。适合大数据工程师、大数据分析师 大量数据需要处理、存储和管理,需要搭建数据仓库?学它! 没有足够人员和经验来运维大数据平台,不想自建IDC买机器,需要免运维的大数据平台?会SQL就等于会大数据?学它! 想知道大数据用得对不对,想用更少的钱得到持续演进的数仓能力?获得极致弹性的计算资源和更好的性能,以及持续保护数据安全的生产环境?学它! 想要获得灵活的分析能力,快速洞察数据规律特征?想要兼得数据湖的灵活性与数据仓库的成长性?学它! 出品人:阿里云大数据产品及研发团队专家 产品 MaxCompute 官网 https://www.aliyun.com/product/odps&nbsp;
相关文章
|
2月前
|
前端开发 算法 数据可视化
怎么在echarts图上左右滑动切换数据区间
怎么在echarts图上左右滑动切换数据区间
58 0
|
2月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
50 0
|
2月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
64 2
|
19天前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
1月前
|
编解码 数据可视化 前端开发
ECharts 对比 Highcharts 使用教程
ECharts 对比 Highcharts 使用教程
35 1
|
1月前
|
数据可视化 前端开发 定位技术
ECharts前端教程
ECharts前端教程
48 3
|
2月前
|
存储 数据可视化 JavaScript
基于Echarts构建大数据招聘岗位数据可视化大屏
基于Echarts构建大数据招聘岗位数据可视化大屏
59 0
|
3月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
160 2
react+datav+echarts实现可视化数据大屏
|
4月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色

热门文章

最新文章