实现动态高亮

效果展示dfcv_Trim.gif

操作步骤

  1. 登录DataV控制台

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

  3. 添加两个柱状图组件到画布中。关闭所有动画效果并修改组件名称为柱状图-1柱状图-2image.pngimage.png

  4. 切换到蓝图编辑器。

  5. 将图层节点的两柱状图节点添加到蓝图主画布中。

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

  7. 连接组件。image.png

  8. 配置两个串行数据处理节点处理方法。

    return {
      "data": {
        "x": data.x,
        "y": data.y,
        "colorField": data.colorField
      },
      "style": {
        "fillStyle": "#f00"//高亮颜色
      }
    }
  9. 单击页面右上角的预览图标,预览展示结果。dfcv_Trim.gif