文档首页> Astro大屏应用 AstroCanvas> 用户指南> AstroCanvas学堂> echarts组件自定义动作交互设置
更新时间:2024-06-17 GMT+08:00
分享

echarts组件自定义动作交互设置

操作场景

echarts组件作为响应器的动作时,可以在自定义动作中设置。

当前仅“Astro大屏应用专业版”实例,才提供Echarts图表组件。

操作步骤

  1. 选中某个echarts组件,单击
  2. 在自定义动作中,单击“新增自定义动作”,修改动作名称为“设置数据高亮”

    图1 新建自定义动作

  3. 在动作实现中,输入如下代码,调用echarts提供的动作API。

    echartsInst.dispatchAction({
         type: 'highlight',
         dataIndex: params.dataIndex,
     });

  4. 单击“新增参数”,设置参数名称为“dataIndex”

    图2 新增dataIndex字段

  5. 选中echarts组件,单击,进入组件交互页面。
  6. 在作为触发器中,单击“交互事件”,选择“组件加载”
  7. 在响应动作中,单击“响应动作”,选择“组件响应”
  8. 在动作详情中,“响应组件”选择echarts组件,“响应动作”选择“设置数据高亮”“dataIndex”设置为“0”

    图3 设置动作详情

  9. 保存交互设置,预览页面,echarts组件渲染首个数据获得高亮效果。

    图4 查看渲染效果

分享:

    相关文档

    相关产品