数据集懒加载

简介 #

懒加载数据集（Lazy Load Dataset）是一种按需触发查询的数据集。与普通数据集在页面加载时自动查询不同，懒加载数据集需要由前端代码主动调用 ds_refresh() 触发，适合数据下载、多级钻取、用户交互后才加载的场景。

应用场景 #

  • 类似于前后端开发, 后端会提供一些接口给前端, 但前端不一定需要在一打开页面就进行查询接口, 而是当有需要时再查询,
  • 比如数据下载, 只有当用户有下载需求时再刷新数据
  • 再比如有些与后台的数据联动, 我们只需要第一次加载时只显示第一层级, 点击时再加载其它层级

开启数据集懒加载 #

  • 在仪表盘"新增"–>“懒加载数据集”
  • 当打开仪表盘时, 此数据集不会被加载

应用 #

刷新数据 #

  • 你可以随时手动触发数据集的刷新, 比如懒加载的数据集序号为0,
  • 你可在需要触发刷新的JS代码段调用ds_refresh(0),
  • 即可刷新0号数据集并执行0号数据集图形中的JS代码

使用数据 #

默认使用 #

当没有修改过懒加载数据集的图形时,默认的全局变量为"data序号", 例如懒加载数据集序号为0, 你可在模板的script中使用data0来获取数据集刷新后的数据

数据处理 #

在有些场景, 可以在懒加载的图形中自定义处理逻辑, 比如我们需要把数据转化成vue常用的格式, 然后给vue的变量赋值:

let dataset = __dataset__;
dataset = ds_createMap_all(dataset);
vapp.ds1 = dataset;  //赋值给vue

当有编辑过图形后,你不再可以用"data序号"来使用数据

参数传递 #

在有一些场景,需要在前端获取参数, 之后触发数据查询, 比如筛选项. 你可以使用ds_setParam(‘参数名’, 参数值)设定参数, 比如刷新1号数据集

ds_setParam('city', '顺德');
ds_setParam('province', '广东');
ds_refresh(1);

典型使用场景示例 #

场景1：下载按钮触发数据刷新 # 

// 静态组件中的下载按钮
dom__name__.innerHTML = '<button id="btn_download">下载数据</button>';

$('#btn_download').click(function() {
    ds_setParam('city', '广州');  // 传递筛选参数
    ds_refresh(3);                // 触发3号懒加载数据集
});

场景2：多级钻取（点击图形后加载下一级） # 

myChart__name__.on('click', function(params) {
    ds_setParam('province', params.name);  // 传入点击的省份
    ds_refresh(2);                          // 刷新2号数据集（市级数据）
    $('#container_2').css('display', 'block');
});
Edit Edit this page