无数据展示实操教程

01 预览效果

02 实现逻辑

通过设置两个【数据容器】，一个存有数据，一个无数据。在数据展示【图表】上配置【自定义事件】，通过条件判断执行不同的动作，实现有数据时显示数据展示【图表】，无数据时显示无数据【文本】。

操作步骤

3.1 数据容器设置

【组件】→【其他】→添加两个【数据容器】。

【交互】→左侧【数据容器】回调字段设置为data1→右侧【数据容器】回调字段设置为data2。

3.2 选项卡设置

【组件】→【交互】→添加【选项卡】组件→选中【选项卡】→【样式】→【全局】→布局调整列数为【2】。

【数据】→设置数据如下：

[  {    "s": "1",    "content": "数据1",    "source": "data1"  },  {    "s": "2",    "content": "数据2",    "source": "data2"  }]

【交互】→添加【回调参数】→匹配动作设置为【状态改变】→字段值设置为【source】→变量名设置为【dataSource】。

3.3 数据展示组件设置

添加数据展示组件，图表类即可→选中【图表】→查看【数据】→复制【数据】。

将数据放入左侧数据容器。

再次选中数据展示【图表】→【数据】→添加【数据过滤器】。

设置过滤器代码如下→设置回调字段【data1】【data2】【dataSource】→【保存】→【开启过滤器】。

添加【标题】组件→选中组件→【数据】中修改文本内容，设置为“当前无数据”。

【交互】→添加2个【自定义事件】→事件1设置如下→事件2设置如下；

事件类型 设置为“当请求完成或数据变化时”条件 设置为自定义条件return data && data[0]
组件选择：基本柱状图动作为显示

事件类型 设置为“当请求完成或数据变化时”条件 设置为自定义条件return !data || !data[0]
组件选择：标题动作为显示