自定义行为

1. 概述

1.1 功能概述

基础图表组件支持通过自定义行为，您可以通过自定义行为窗口直接编写JS代码，操作ECharts实例对象myChart（接口文档），并支持使用setTimeout/setInterval实现动态图表效果，执行时机可选择"组件渲染后"触发。

2. 操作步骤

本文将指导您在Wyn中使用自定义行为。

2.1 前提条件

1. 数据要求： 已完成数据连接与数据准备，本文将以本地Excel文件及缓存数据集为例演示操作流程。

2. 界面要求： 已进入仪表板设计界面，且仪表板至少已绑定一个基础图表组件（如柱状图）完成数据绑定（如“Excel数据-缓存数据集“）。

2.2 操作步骤

例如：使用setInterval函数实现堆叠柱状图的轮播，预览效果如下：

1. 使用柱状图组件，绑定数据。

   
   

2. 选中柱状图组件，设置图表类型为堆叠柱状图，

   
   

3. 选中柱状图组件，开启显示缩放轴属性。

   
   

4. 选中柱状图组件，将下面的代码复制进自定义行为和自定义属性并保存。

   
   

   //自定义属性
   delete option.dataZoom[0].end
   delete option.dataZoom[0].start
   option.dataZoom[0].endValue = 0;
   option.dataZoom[0].startValue = 2
   return option

   
   

   //自定义行为
   setInterval(() => {
       if(option.dataZoom[0].endValue === option.xAxis.data.length){
       option.dataZoom[0].startValue = 2;
       option.dataZoom[0].endValue = 0;
     }else{
     	option.dataZoom[0].endValue += 1;
       option.dataZoom[0].startValue += 1;
     }
   	myChart.setOption(option);
   },2000)

5. 预览查看效果。效果参考操作步骤开始部分的动图。