组件 API 手册

ChartBuilder开放的组件控制接口包括如下几类：

• 设置样式
• 设置文本
• 挂载节点
• 设置动画

此文档适合ChartBuilder空白组件开发人员使用, 在ChartBuilder工具上写JavaScript的时候，在输入this.之后，代码行也会给相应的API提示，选择API后在代码行里也会有辅助的注释一起添加到代码中供实施人员参考。

setStyle

接口简要描述:

通过该接口可以给传递进来的 div 应用 css 样式

入参:

obj 需要被应用样式的 div，div 的类型是HTMLElement

style css 样式

返回值: 无

返回值示例: 无

调用demo:

//下面一段是设置DOM节点的样式对象,实际上就是将staticdemo.html中的样式转换成对象的表达形式
let bizStyle = {
  border: '1px solid rgba(255,0,0,1)',
  borderRadius: '10px',
  textAlign: 'center',
  fontSize: '18px',
  position: 'absolute',
  width: '100%',
  height: '100px',
  lineHeight: '100px',
}

//下面一段是创建业务DOM节点
let bizDOM = document.createElement('div')

//下面一段是将样式apply到业务DOM中
this.setStyleByArray(bizDOM, bizStyle)

备注: 无

setStyleByArray

接口简要描述:

通过该接口可以给传递进来的div应用css样式数组循环设置数组中对应项的样式

入参:

obj 需要被应用样式的div，div的类型是HTMLElement

styleArr CSS 样式

返回值: 无

返回值示例: 无

调用demo:

//下面一段是设置DOM节点的样式对象,实际上就是将staticdemo.html中的样式转换成对象的表达形式
let bizStyle = {
  border: '1px solid rgba(255,0,0,1)',
  borderRadius: '10px',
  textAlign: 'center',
  fontSize: '18px',
  position: 'absolute',
  width: '100%',
  height: '100px',
  lineHeight: '100px',
}

//下面一段是创建业务DOM节点
let bizDOM = document.createElement('div')

//下面一段是将样式apply到业务DOM中
this.setStyleByArray([bizDOM], [bizStyle])

备注: 无

getStyleStringByObject

接口简要描述:

该接口可以通过样式的对象获取字符串形式的style

入参:

styleObj 样式的对象

返回值:

样式字符串

返回值示例:

index.js:33 border:1px solid rgba(255,0,0,1);border-radius:10px;text-align:center;font-size:18px;position:absolute;width:100%;height:100px;line-height:100px;

调用demo:

//下面一段是设置DOM节点的样式对象,实际上就是将staticdemo.html中的样式转换成对象的表达形式
let bizStyle = {
    'border': '1px solid rgba(255,0,0,1)',
    'border-radius': '10px',
    'text-align': 'center',
    'font-size': '18px',
    'position': 'absolute',
    'width': '100%',
    'height': '100px',
    'line-height': '100px',
  }
  let styleString = this.getStyleStringByObject(bizStyle)

备注: 无

setItemValue

接口简要描述:

通过该接口可以给对象设置文本

入参:

obj 设值对象

value 值

返回值: 无

返回值示例: 无

调用demo:

// 这里可以存放组件的模拟数据，将来可以直接从订阅来的数据中获取真实数据来修改comData
let comData = {
  content: 'Hello World!'
}

//下面一段是创建业务DOM节点
let bizDOM = document.createElement('div')

//下面一段是给业务节点设置文本值
this.setItemValue(bizDOM, comData.content)

备注: 无

setItemHTML

接口简要描述:

通过该接口可以将html文本设置进DOM节点

入参:

obj 需要设置内容的DOM节点

html 需要mount进去的html文本

返回值: 无

返回值示例: 无

调用demo:

// 这里可以存放组件的模拟数据，将来可以直接从订阅来的数据中获取真实数据来修改comData
let comData = {
    content: 'Hello World!'
}
let ownerPanel = this.getDom()
//下面一段是设置DOM节点的样式对象,实际上就是将staticdemo.html中的样式转换成对象的表达形式
let bizStyle = {
  'border': '1px solid rgba(255,0,0,1)',
  'border-radius': '10px',
  'text-align': 'center',
  'font-size': '18px',
  'position': 'absolute',
  'width': '100%',
  'height': '100px',
  'line-height': '100px',
  }

let dynamicTemplate = () => {
  let template = `<div style="${this.getStyleStringByObject(bizStyle)}">${comData.content}</div>`
      return template
  }

  //下面一段是将DOM阶段挂载到ownerPanel中
  this.setItemHTML(ownerPanel, dynamicTemplate())

备注: 无

mountToDom

接口简要描述:

通过该接口可以将bizDom挂载到父亲上去

入参:

bizDom 需要被挂在的节点

parent 需要挂载的父亲节点

返回值: 无

返回值示例: 无

调用demo:

let ownerPanel = this.getDom()

//下面一段是创建业务DOM节点
let bizDOM = document.createElement('div')

//下面一段是将DOM阶段挂载到ownerPanel中
this.mountToDom(bizDOM, ownerPanel)

备注: 无

mountToDomByArray

接口简要描述:

通过该接口可以将一组DOM挂在到父亲节点上

入参:

bizDom 一组需要挂在的DOM节点

parent 需要挂载的父亲节点

返回值: 无

返回值示例: 无

调用demo:

let ownerPanel = this.getDom()

//下面一段是创建业务DOM节点
let bizDOM = document.createElement('div')

//下面一段是将DOM阶段挂载到ownerPanel中
this.mountToDom([bizDOM], ownerPanel)

备注: 无

addCallback

接口简要描述:

通过该接口可以向队列中增加回调函数

入参:

cb 回调函数

返回值: 无

返回值示例: 无

调用demo:

/**模拟数据变化后执行的callback */
// 这里可以存放组件的模拟数据，将来可以直接从订阅来的数据中获取真实数据来修改comData
let comData = {
  content: 'Hello World!'
  }

//下面一段是设置DOM节点的样式对象,实际上就是将staticdemo.html中的样式转换成对象的表达形式
let bizStyle = {
  border: '1px solid rgba(255,0,0,1)',
  borderRadius: '10px',
  textAlign: 'center',
  fontSize: '18px',
  position: 'absolute',
  width: '100%',
  height: '100px',
  lineHeight: '100px',
}

//下面一段是创建业务DOM节点
let bizDOM = document.createElement('div')

let cbOnDataChange = () => {
  //模拟数据变化了
  comData.content = 'Hello UINO!!'
  //因数据变化而修改的不同样式
  bizStyle.border = '2px solid blue'
  //清空DOM节点内容
  this.clearDom()
  //设置新的HTML内容到根DOM中
  this.setItemHTML(ownerPanel, dynamicTemplate())
  }

//将回调添加到执行队列
this.addCallback(cbOnDataChange)

备注: 无

clearCallback

接口简要描述:

通过该接口可以清空回调队列

入参: 无

返回值: 无

返回值示例: 无

调用demo:

//清空回调函数队列，此行不可删除
this.clearCallback()

备注: 无

applyTransitionAnimation

接口简要描述:

通过该接口可以给元素应用转场动画

入参:

obj 需要执行转场动画的对象，必传参数

type 转场动画类型 customer/toRight/toLeft，如果没有回调函数，该参数传null,如果接受到的参数为customer，则执行opts传进来的自定义动画参数

cb 出场结束后执行的回调函数，这个时候可以修改业务数据和样式，如果没有回调函数，该参数传null

times 动画执行的时长, 该参数默认为500毫秒，但是调用时如果使用默认，该参数传null即可

opts 转场动画的转出参数，如果使用type自带的，该参数传null即可

返回值: 无

返回值示例: 无

调用demo:

// 这里可以存放组件的模拟数据，将来可以直接从订阅来的数据中获取真实数据来修改comData
let comData = {
  content: 'Hello World!'
  }

//下面一段是设置DOM节点的样式对象,实际上就是将staticdemo.html中的样式转换成对象的表达形式
let bizStyle = {
  border: '1px solid rgba(255,0,0,1)',
  borderRadius: '10px',
  textAlign: 'center',
  fontSize: '18px',
  position: 'absolute',
  width: '100%',
  height: '100px',
  lineHeight: '100px',
}

//下面一段是创建业务DOM节点
let bizDOM = document.createElement('div')

/**模拟数据变化后执行的callback--带转场动画 */
let cbOnDataChangeWithTransition = () => {
  //这里应用转场动画进行数据切换
  this.applyTransitionAnimation(bizDOM, 'toLeft', () => {
  //模拟数据变化了
  comData.content = 'Hello UINO!!'
  //因数据变化而修改的不同样式
  bizStyle.border = '2px solid blue'

  //下面一段是将因业务数据变化而产生的样式变化应用到DOM对象上
  this.setStyleByArray([bizDOM], [bizStyle])

  //下面一段是给业务节点设置文本值
  this.setItemValue(bizDOM, comData.content)
  },null,null)
}

备注: 无

loopAnimation

接口简要描述:

通过该接口可以创建循环执行的动画

入参:

obj 执行动画的对象

type 动画类型 例如：360度顺时针旋转动画 rotate|clockwise,360度逆时针旋转动画 rotate|anticlockwise,来回移动 goback|200|200 最后一个参数为移动的距离x|y,右左来回移动 go|200|200 最后一个参数为移动的距离x|y times 执行每段动画时长

easing 动画的执行缓动函数,，可以查阅手册缓动函数

返回值:

数组: 返回循环执行的两段动画对象，可用于停止动画的执行

返回值示例:

[TWEEN.tween, TWEEN.tween]

调用demo:

//下面一段是创建业务DOM节点
let bizDOM = document.createElement('div')

let loopAnimate = this.loopAnimation(bizDOM,'goback|200|200',2000, null)

备注: 无

addAnimation

接口简要描述:

通过该接口可以向动画队列里添加需要执行的动画，此动画为常态执行动画

入参:

obj 执行动画的对象

start 执行动画开始的参数

end 执行动画结束的参数

times 动画执行时长，毫秒

easing 动画执行的缓动函数，默认：TWEEN.Easing.Linear.None

repeat 重复执行次数，无限次循环:Infinity

cb 动画执行完成后的回调函数，利用回调可以左多个动画相互调用，形成循环调用

返回值: 无

返回值示例: 无

调用demo:

//下面一段是创建业务DOM节点
let bizDOM = document.createElement('div')

//添加第一个动画
let animate1 = this.addAnimation(bizDOM, null, null, 2000, null, 3, () => {
  //在第一个动画结束后的回调函数里启动第二个动画，后续第三，第四...第N个动画也可以这样一个一个开启
   animate2.start()
  })
  //模式开始第一个动画,动画开启了以后也不立刻执行，还需要在后面开启动画队列
  animate1.start()

  //添加第二个动画
  let animate2 = this.addAnimation(bizDOM, {
    translateX: 0,
    translateY: 0,
    scale: 1,
    rotateX: 0,
    opacity: 1
    }, {
      translateX: 0,
      translateY: 0,
      scale: 1,
      rotateX: 180,
      opacity: 1
    }, null, null, 1, null)

备注: 无

startAnimationStack

接口简要描述:

通过该接口可以执行队列里的所有动画

入参: 无

返回值: 无

返回值示例: 无

调用demo:

//下面一段是创建业务DOM节点
let bizDOM = document.createElement('div')

//添加第一个动画
let animate1 = this.addAnimation(bizDOM, null, null, 2000, null, 3, () => {
  //在第一个动画结束后的回调函数里启动第二个动画，后续第三，第四...第N个动画也可以这样一个一个开启
   animate2.start()
  })
  //模式开始第一个动画,动画开启了以后也不立刻执行，还需要在后面开启动画队列
  animate1.start()

  //添加第二个动画
  let animate2 = this.addAnimation(bizDOM, {
    translateX: 0,
    translateY: 0,
    scale: 1,
    rotateX: 0,
    opacity: 1
    }, {
      translateX: 0,
      translateY: 0,
      scale: 1,
      rotateX: 180,
      opacity: 1
    }, null, null, 1, null)

  //开启动画队列，在这里开启以后动画才能够正式开始运行
  this.startAnimationStack()

备注: 无

addAnimationAtObject

接口简要描述:

将在普通的JSON对象上增加缓冲动画

入参: startObj 执行动画开始的参数 endObj 执行动画结束的参数 times 动画执行时长，毫秒 easing 动画执行的缓动函数，默认：TWEEN.Easing.Linear.None repeat 重复执行次数，无限次循环:Infinity cb 动画执行完成后的回调函数，利用回调可以左多个动画相互调用，形成循环调用

返回值: Tween对象

返回值示例: 无

调用demo:

let oldObj = {width: parseInt(item.getAttribute('width')) || 0}
let newObj = {width: (comData[index] / max * 100)}

//调用对象缓冲变化的动画函数去改变width值，使进度条看起来有动画效果
let tween = this.addAnimationAtObject(oldObj,newObj,400,null,null,(transition) => {
  item.setAttribute('width',(transition.width + '%'))
})

//开始动画和动画队列
tween.start()
this.startAnimationStack()

备注: 无

createDOMByDefinition

接口简要描述:

根据HTML节点的定义文件创建DOM对象并挂载到制定的DOM节点上

入参: parent 父亲节点 definition 描述DOM节点的数组 cb 回调函数

返回值: 无

返回值示例: 无

调用demo:

//创建业务DOM对象并挂载到ownerPanel中
    this.createDOMByDefinition(ownerPanel, definition, createDOMCallback)
/**
     * @desc 生成DOM时的回调函数，用于操作和保存相关业务节点
     * @param {HTMLElement||SVGElement} itemDOM 返回已经创建的DOM对象
     * @param {object} itemDOMDef 生成每项DOM的定义文件内容
     */
    function createDOMCallback(itemDOM, itemDOMDef) {
      let type = null
      let tag = null
      if (itemDOMDef) {
type = itemDOMDef.type
tag = itemDOMDef.tag
      }
  //保存标题DOM的对象
      if(tag === 'bizItemTitle') {
bizItemTitleArr.push(itemDOM)
      }
      //保存业务数据的DOM
      if(tag === 'bizItemValue') {
bizItemValueArr.push(itemDOM)
      }
      //保存进度条DOM节点
      if(tag === 'bizBar') {
bizBarArr.push(itemDOM)
itemDOM.setAttribute('fill','url(#linearGradient)')
      }
      //给渐变色的对象修改属性
      if (tag === 'linearGradient') {
itemDOM.setAttribute('id','linearGradient')
itemDOM.setAttribute('x1','0')
itemDOM.setAttribute('y1','0')
itemDOM.setAttribute('x2','100%')
itemDOM.setAttribute('y2','0')
      }
      //给起点色的DOM对象修改属性
      if(tag === 'lgStart') {
itemDOM.setAttribute('offset','0')
      }
      //给终点色对象修改属性
      if(tag === 'lgEnd') {
itemDOM.setAttribute('offset','100%')
      }
    }

备注: 无