实现动态样式

效果展示

操作步骤

1. 登录DataV控制台。

2. 选择任一数据看板，单击编辑，进入画布编辑器页面。

3. 添加Tab列表组件和数字翻牌器组件到画布中。

4. 选择Tab列表组件，单击数据源面板，修改数据内容。

   [
     {
       "id": 1,
       "content": "TAB1"
     },
     {
       "id": 2,
       "content": "TAB2"
     }
   ]

5. 选择数字翻牌器组件，单击样式面板，修改标题为根据value修改数字颜色。

6. 切换到蓝图编辑器。

7. 将图层节点添加到蓝图主画布中。

8. 单击逻辑节点，添加2个串行数据处理节点到蓝图主画布中。

9. 连接组件，为串行数据处理节点增加说明。

10. 配置串行数据处理节点处理方法。

    • 更新翻牌器value值

      return [{value: data.id == 1 ? 30 : 50}];

    • 配置数字颜色

      1. 返回画布编辑器页面。单击数字翻牌器组件，在右侧的样式面板中，单击下方的复制配置到剪贴板。

      2. 将复制的内容粘贴到任意的代码编辑器中，观察数据层级关系，并找到需要更新的配置字段。

      3. 根据上图的数据结构，编写要传入数字翻牌器的样式配置脚本。

         return data[0].value - 40 >= 0 ? {
           "counter": {
             "numbers": {
               "textStyle": {
                 "color": {
                   "type":"flat",
                   "value":"red"//将要修改的数据颜色
                 }
               }
             }
           }
         } : {
             "counter": {
               "numbers": {
                 "textStyle": {
                   "color": {
                   "type":"flat",
                   "value":"rgb(10,115,255)"//初始颜色
                 }
                   
                 }
               }
             }
           }

11. 单击页面右上角的预览图标，预览展示结果。