-
-
橙子 小试身手Lv3
发表于2019-7-31 11:23
楼主
需求：ABI酷屏自定义组件（echarts）。
去echarts官网（https://echarts.baidu.com/examples/editor.html?c=line-simple）找效果图，以基础的折线图为例，整体两个data分别代表x轴数据和y轴数据，还有一个lineStyle的color属性，可以通过改变它的值来控制折线颜色。
步骤：
1.在自定义组件或分组上右键，选择新建HTML组件。
2.去取数定义里设置我们需要的变量，就是指x轴（xdata）和y轴（ydata）对应的数据。
3. 去属性中添加一个color属性来控制折线颜色。colorText
4.开始写代码，default.js用来写js代码，default.css是样式文件，如果还需要别的文件，可以点击加号添加，js和css最多可以各添加5个，每个大小在100k以下。
5.写js，定义两个全局变量来存放我们的折线图对象和折线颜色。 chart=null;var colorTest=null;
6.去初始化init方法里，用变量存放取数得到的变量。 var initdatax =eval(vardata.xdata); var initdatay =eval(vardata.ydata);
7.判断是否引入文件，没有则引 if(!window["echarts4"]){EUI.include("vfs/root/products/ebi/sys/coolrpt/coolresource/js/echarts.js");}
8.初始化chart对象。chart = echarts4.init(basedom);
自定义第三方echarts组件.pdf
(390.93 KB, 下载次数: )
9.实现并调用getValue，初始化属性面板属性值。
10.写getOption方法用来传给chart对象，并调用。
11.调用chart.setOption(opt);
12. 颜色属性设置，实现setProperty。
13. 联动刷新数据，实现refreshDatas()。
14. 实现自适应resize。
15. 实现销毁dispose。
803b2ee95727463688b10784d4df75f6.zip
(535.83 KB, 下载次数: )
引入资源管理器js.zip
(529.6 KB, 下载次数: )
去echarts官网（https://echarts.baidu.com/examples/editor.html?c=line-simple）找效果图，以基础的折线图为例，整体两个data分别代表x轴数据和y轴数据，还有一个lineStyle的color属性，可以通过改变它的值来控制折线颜色。
步骤：
1.在自定义组件或分组上右键，选择新建HTML组件。
2.去取数定义里设置我们需要的变量，就是指x轴（xdata）和y轴（ydata）对应的数据。
3. 去属性中添加一个color属性来控制折线颜色。colorText
4.开始写代码，default.js用来写js代码，default.css是样式文件，如果还需要别的文件，可以点击加号添加，js和css最多可以各添加5个，每个大小在100k以下。
5.写js，定义两个全局变量来存放我们的折线图对象和折线颜色。 chart=null;var colorTest=null;
6.去初始化init方法里，用变量存放取数得到的变量。 var initdatax =eval(vardata.xdata); var initdatay =eval(vardata.ydata);
7.判断是否引入文件，没有则引 if(!window["echarts4"]){EUI.include("vfs/root/products/ebi/sys/coolrpt/coolresource/js/echarts.js");}
8.初始化chart对象。chart = echarts4.init(basedom);
自定义第三方echarts组件.pdf
(390.93 KB, 下载次数: )
9.实现并调用getValue，初始化属性面板属性值。
10.写getOption方法用来传给chart对象，并调用。
11.调用chart.setOption(opt);
12. 颜色属性设置，实现setProperty。
13. 联动刷新数据，实现refreshDatas()。
14. 实现自适应resize。
15. 实现销毁dispose。
***附件是折线图组件（可以直接选择导入组件）、word文档详细制作自定义组件。
完整default.js 如果直接粘贴default.js 。
1）注意取数定义（xdata）和y轴（ydata)。
2）属性中添加一个color属性来控制折线颜色。colorTest)
1）注意取数定义（xdata）和y轴（ydata)。
2）属性中添加一个color属性来控制折线颜色。colorTest)
/*
* 初始化方法
*
* @params cwidget 组件对象
* @params vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
* @params storagedata 组件自己需要存储的值，字符串格式
* @params events 事件，用户在右边属性上设置的事件, json格式：{'evt1': function(){...}, 'evt2':function(){....}}
* @params resources 资源及权限校验，json格式：{'resids': ['EBI$12$xxx$1$xxx.rpttpl','EBI$12$xxx$1$xxx.coolrpt'], 'pms': [true, false]}
*/
var chart=null;
var colorTest=null;
function init(cwidget, vardata, events, storagedata, resources){
var basedom = cwidget.basedom;
debugger;
//1、得到取数的变量
var initdatax =eval(vardata.xdata);
var initdatay =eval(vardata.ydata);
//2.引入外部js
if(!window["echarts4"])
{
EUI.include("vfs/root/products/ebi/sys/coolrpt/coolresource/js/echarts.js");
}
//3初始化charts对象
chart = echarts4.init(basedom);
//4.实现getValue,初始化属性面板属性值
getValue(cwidget);
//5.写getoption方法用来给chart传对象
var opt=getOption(initdatax,initdatay);
//6.调用chart的setOption
chart.setOption(opt);
//渲染option（官网option示例）
function getOption(initdatax,initdatay){
var option = {
xAxis: {
type: 'category',
data: initdatax
},
yAxis: {
type: 'value'
},
series: [{
data: initdatay,
type: 'line',
lineStyle:{
color: colorTest
}
};
return option;
}
if(cwidget.isresultview){
//只在结果界面的时候执行，例如只想在结果界面绑定click事件
}
}
/**
* 定义了自定义属性时，必须实现该方法，方法名为setProperty
* 当在属性面板上修改属性后，会调用该方法
* @param key 属性名
* @param value 属性值
* @param cwidget 组件对象
* @returns
*/
function setProperty(key, value, cwidget) {
//7.颜色属性设置，实现setProperty
var opt=chart.getOption();
if (key === 'color') {
//修改属性xxx时，触发的事
opt.series[0].lineStyle.color = value;
}
chart.setOption(opt);
}
/**
* 刷新操作，数据改变时，调用该方法，重新渲染数据
* @param cwidget 组件对象
* @param vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
* @param storagedata 组件自己需要存储的值，字符串格式
* @returns
*/
function refreshDatas(cwidget, vardata, storagedata){
//8.联动刷新数据，实现refreshDatas()
var basedom = cwidget.basedom;
var opt=chart.getOption();
var initdatax =eval(vardata.xdata);
var initdatay =eval(vardata.ydata);
opt.xAxis[0].data=initdatax;
opt.series[0].data=initdatay;
chart.setOption(opt);
}
/**
* 组件大小改变时执行
* @param cwidget 组件对象
* @returns
*/
function resize(cwidget){
//9.实现自适应resize
chart.resize();
}
/**
* 获取组件的参数值
* @param cwidget 组件对象
* @returns
*/
function getValue(cwidget){
colorTest = cwidget.getProperty("color");
}
/**
* 获取组件的参数名称
* @param cwidget 组件对象
* @returns
*/
function getParamName(cwidget){
}
/*
* 销毁操作,销毁自己相关的东西
*/
function dispose(cwidget){
//10.实现销毁dispose
chart.dispose();
chart = null;
colorTest = null;
}
803b2ee95727463688b10784d4df75f6.zip
(535.83 KB, 下载次数: )
引入资源管理器js.zip
(529.6 KB, 下载次数: )
