组件示例

//数据接入
(async function () {
  //读取数据
  let data = await ShanhaiBI.getData();
  console.log("data", data);
  let columns = data.getColumns(); //获取所有的数据列
  option.xAxis.data = columns[0]; //第一列数据
  option.series[0].data = columns[1]; //第二列数据

  myChart.setOption(option); //更新echarts图表
})();

//设置项
(async function () {
  //初始化设置项
  await ShanhaiBI.initSettings({
    format: [
      {
        name: "smooth",
        alias: "平滑线",
        type: "boolean",
        default: false,
      },
    ],
  });
  //读取设置项的值
  let smooth = await ShanhaiBI.getSetting("smooth");
  //使设置项生效
  option.series[0].smooth = smooth;
  myChart.setOption(option); //更新echarts图表
})();

//数据进阶
(async function () {
  //数据字段分类
  await ShanhaiBI.initSettings({
    fields: [
      {
        name: "category",
        alias: "分类",
        type: "axis",
      },
      {
        name: "value",
        alias: "值",
        type: "axis",
      },
    ],
  });
  //读取数据
  let data = await ShanhaiBI.getData();
  option.xAxis.data = data.getColumn("category"); //获取category的第一列数据
  option.series[0].data = data.getColumn("value"); //获取value的第一列数据
  myChart.setOption(option);
})();

//数据联动
$("#btn1").on("click", async () => {
  //触发 城市为杭州 的联动
  await ShanhaiBI.applyLinkage({
    城市: "杭州",
  });
});
$("#btn2").on("click", async () => {
  //取消之前触发的联动
  await ShanhaiBI.withdrawLinkage();
});

//过场动画
(async function () {
  //注册过场动画，该函数可调用多次以注册不同的过场动画
  //第一个参数为动画名称
  //第二个参数为动画参数定义
  //第三个参数为动画执行函数
  await ShanhaiBI.registerTransition(
    "平移",
    {
      type: {
        label: "平移类型",
        choices: [
          { label: "水平", value: "horizontal" },
          { label: "垂直", value: "vertical" },
        ],
        default: "horizontal",
      },
    },
    (duration, args) => {
      console.log(duration, args);
      let type = args["type"];
      if (type === "horizontal") {
        //水平平移动画
        return gsap
          .fromTo(
            "#title",
            { left: 0 },
            { left: "250px", duration: duration / 2 / 1000, ease: "power2.in" }
          )
          .then(() => {
            return gsap.to("#title", {
              left: 0,
              duration: duration / 2 / 1000,
              ease: "power2.in",
            });
          });
      } else if (type === "vertical") {
        //垂直平移动画
        return gsap
          .fromTo(
            "#title",
            { top: 0 },
            { top: "250px", duration: duration / 2 / 1000, ease: "power2.in" }
          )
          .then(() => {
            return gsap.to("#title", {
              top: 0,
              duration: duration / 2 / 1000,
              ease: "power2.in",
            });
          });
      }
    }
  );
})();

//app控制
(async function () {
  //注册app操作，该函数可调用多次以添加多个不同的分组
  //第一个参数为操作分组
  //第二个参数为该分组中的操作
  await ShanhaiBI.registerAppActions("平移操作", [
    {
      name: "水平平移",
      func: () => {
        return gsap
          .fromTo(
            "#title",
            { left: 0 },
            { left: "250px", duration: 1, ease: "power2.in" }
          )
          .then(() => {
            return gsap.to("#title", {
              left: 0,
              duration: 1,
              ease: "power2.in",
            });
          });
      },
    },
    {
      name: "垂直平移",
      func: () => {
        return gsap
          .fromTo(
            "#title",
            { top: 0 },
            { top: "250px", duration: 1, ease: "power2.in" }
          )
          .then(() => {
            return gsap.to("#title", {
              top: 0,
              duration: 1,
              ease: "power2.in",
            });
          });
      },
    },
  ]);
})();