应用场景
在苍穹平台无法提供特殊业务需求的控件的场景下，可以利用自定义控件结合前端静态文件和后端插件开发满足自己业务的组件，如漏斗图、散点图、甘特图等，下面结合自身最近开发的漏斗图图表简单介绍下自定义控件的开发总结。
自定义控件封装
前端组件
本地开发组件存放地址
前端组件存放在开发者C盘平台代码目录下，具体的为：
C:\biz-evn-dev\mservice\webapp\kingdee\mbis，其中mbis为领域标识。
前端组件构成:
index.js为控件引导脚本，组件中不可或缺，提供了完整的生命周期，包括init、update、destoryed等方法，init是在组件初始化时被调用，常用于文件或数据加载， update是后端向前端自定义控件传值时触发，常用于后端的数据渲染，具体的业务逻辑可以在init或update代码块中封装实现，如本例中加载echarts图表并从后端获取数据并展示漏斗图。destroyed在组件销毁时调用。启动服务，访问http://localhost:8080/ierp/kingdee/mbis/vip_tansfer_rate/index.js，如果成功，则显示以下界面：
css目录存放组件所属的样式文件；
html目录存放用于渲染组件的页面，如按钮、div容器、input输入框等；如本例需展示漏斗图，html页面中添加<div id="main"></div>标签，用于包裹待加载的图表。
js目录存放引入的第三方js或自己的业务js，如本地引入第三方js文件echarts.min.js，用于echarts样式渲染。
(function(KDApi, $){
function MyComponent (model) {
this._setModel(model)
}
MyComponent.prototype = {
_setModel: function(model) {
this.model = model
},
init: function(props){
//initFunc(this.model, props);
},
update: function(props){
console.log(props.data);
initFunc(this.model, props);
//showFunnel(props.data)
},
destoryed: function(){
}
}
// 初始化容器
var initFunc = function(model, props) {
KDApi.loadFile('./js/echarts.min.js', model, function() { KDApi.getTemplateStringByFilePath('./html/vip_transfer_rate.html', model, {
text:'Hello, World!'
}).then(function(result) {
console.log(result)
model.dom.innerHTML = result;
showFunnel(props.data);
})
})
}
//根据后端返回数据渲染漏斗图表
var showFunnel = function(datas){
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
//指示图表样式
var labelStyle = {show:true,position:'center',formatter:"{c}人"};
var finalDatas =[
{ value: datas['total'], name: '新增总人数',itemStyle:{color:'#40A9FF'},label:labelStyle},
{ value: datas['vipNum'], name: '新增会员数',itemStyle:{color:'#45DAD1'},label:labelStyle},
{value: datas['vipPayNum'], name: '新增且消费的会员数',itemStyle:{color:'#73D13D'},label:labelStyle}
] ;
var option;
option = {
//悬浮框
tooltip: {
backgroundColor:"rgba(0,0,0,0.6)",
borderColor:"rgba(0,0,0,0.6)",
textStyle:{color:"#FFFFFF"},
trigger: 'item',
formatter: '{b}:{c}人',
position:'top'
},
toolbox: {
orient: 'vertical',
top: 'center'
},
//图例样式
legend: {
orient: 'horizontal',
itemWidth: 8,
itemHeight: 8
},
series: [
{
name: '会员转换率',
type: 'funnel',
width: '80%',
height: '75%',
left: 'center',
top: 'center',
data: finalDatas
}
]
};
option && myChart.setOption(option);
//图表自适应
window.onresize = myChart.resize;
KDApi.register('vip_tansfer_rate', MyComponent);
})(window.KDApi, jQuery)
index.js文件中KDApi.loadFile （）用于加载所需的文件，类似于js文件中<script src=”xxxx.js”></script>引入外部js，KDApi.getTemplateStringByFilePath（）获取外部待渲染的容器文件，KDApi.register('vip_tansfer_rate', MyComponent)；将此前端组件注册到页面并与该自定义组件选择的控件方案进行绑定，其中‘vip_tansfer_rate’必须与控件方案中的方案id一致（详见下文），否则，该控件在预览时找不到指定静态文件。showFunnel（）方法根据后端返回数据渲染漏斗图表，具体可查看echarts官网搜索示例：https://echarts.apache.org/zh/index.html。
自定义控件创建
在单据页面选择【自定义控件】，拖至指定位置
在右侧【控件属性】新增控件方案，并进行绑定，注意：方案id一定要和index.js中KDApi.register('vip_tansfer_rate', MyComponent)方法中的id要一致。领域标识与c盘平台代码静态文件地址C:\biz-evn-dev\mservice\webapp\kingdee\下的文件夹名一致。创建成功后可预览控件。
与后端交互
index.js中的添加this.model.invoke('updateData',value);在执行至此方法时，系统会触发调用单据绑定的插件的customEvent时间，可向后端传值进行交互处理业务逻辑；
@Override
public void customEvent(CustomEventArgs e) {}
Index.js中的添加this.model.invoke('updateData',value);在执行至此方法时，系统会触发调用单据绑定的插件的customEvent时间，可向后端传值进行交互处理业务逻辑；后端插件方法中进行setData()方法
CustomControl customcontrol= this.getView().getControl("customcontrolap");
customcontrol.setData("test message"); }
前端index.js中的update事件中获取到后台发送的数据
update:function(props){
$(this.model.dom).find('input').val(props.data);
}
效果展示
注：若需要实现其他平台未提供的控件图表，需自行去Echarts官网获取对应js示例，修改引导文件index.js中的showFunnel（）方法。
苍穹自定义控件开发总结_02(绘制自定义图表).docx(512.59KB)