angular下对echarts的封装 【使对象嵌套对象变得可维护】

已知显示图表的API是:chart.setOption(option: Object); 其中option为配置项。如果我们要对x坐标的show, fontSize进行配置,就是这样:

    const option = {
      xAxis: {
        data: ["一班", "二班", "三班"],
        axisLabel: {
          fontSize: 24,
          show: true
        }
      },
// 此处省略其它配置项
    };
    chart.setOption(option);

如果有很多的配置信息,option这个对象将很快变得无法维护,因此做了以下封装:

 const argsEachToObj: Function = (...args: (() => Object)[]) => {
  const obj = {};
  args.forEach((item, index) => {
    Object.assign(obj, item());
  });
  return obj;
}; 

 const judgeAndReturn: Function = (defaultVal: any, val: any) => {
  const valNew = val === undefined ? defaultVal : val;
  return valNew;
}; 
// title start
export const titleText: Function = (val?: string) => {
  return () => ({ text: judgeAndReturn('', val) });
};
export const titleConstructor = (...args: Function[]) => {
  return () => {
    return { title: argsEachToObj(...args) };
  };
};
// title end

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值