1.概述
本文档用于介绍如何自定义敏捷看板组件-统计图组件。
2.操作说明
2.1新建组件
进入【组件库管理】-【组件库】-【敏捷看板组件】中，打开自定义组件标签页，点击新建组件。
2.2组件的html结构
<div style="width:100%;height:100%"></div>
普通统计图一般是用echarts实现的，所以只用定义一个div作为容器即可，里面用echarts生成统计图
2.3组件的js脚本
1）内置对象
目前工程已经内置了一些对象，来处理公共的属性，对象如下。
对象 | 对象说明 |
BaseChart | 简单的封装了echarts对象，相当于一个中间过渡对象。【用户设置-->BaseChart-->Echart】 |
Legend | 图例，负责将用户设置的属性转变为echarts需要的图例设置。【用户的图例设置->BaseChart.ChartLegend-->Echarts.legend】 |
ChartAxisMgr | 轴管理，负责将用户设置的属性转变成echarts需要的轴设置，持有ChartAxis对象。【用户的轴设置->BaseChart.ChartAxisMgr-->Echarts.axis】 |
ChartWall | 背景墙，负责将用户设置的属性转变成echarts需要的wall设置。【用户的背景设置->BaseChart.ChartWall-->Echarts.wall】 |
ChartTitle | 标题，负责将用户设置的属转为echarts需要的title设置。【用户的标题设置->BaseChart.ChartTitle-->Echarts.title】 |
ChartSeries | 系列，统计图关于系列相关的操作 |
详细说明见：基类统计图属性名称列表
2）定义一个统计图类
为每个统计图类型定义一个类，以线状图为例，先定义一个LineChart对象
var basechart = require("ewonderwidget/dist/resource/basechart/basechart");
/*
* 线状统计图
*/
function LineChart(options) {
basechart.BaseChart.call(this, options);
}
EUI.extendClass(LineChart, basechart.BaseChart, "LineChart");
/**
* 【必须】销毁方法
*/
LineChart.prototype.dispose = function() {
LineChart._superClass.property.dispose.call(this);
}
/**
* 初始化其他，这里为serie对象添加相应属性处理的方法
*/
LineChart.prototype.initOther = function(){
this.getSeriesObject().setSerieSize = function(value, serieIndex) {
value = value || {
lineWidth : 6
};
this.setSerieExtend({
lineStyle : {
width : value.lineWidth
}
}, serieIndex);
}
this.getSeriesObject().setSerieShow = function(value, serieIndex) {
value = value || {
lineSmooth : true
};
// 只改某个系列,还是所有的都改
this.setSerieExtend({
showSymbol: value.showLinePoint,
smooth : value.lineSmooth,
symbol: value.lineShape,
symbolSize: value.pointSize
}, serieIndex);
}
}
/**
*【必须】生成统计图配置之前执行的逻辑
*可以在这时候处理取数数据到相应的对象中
*/
LineChart.prototype.beforeSave = function(){
var axisRcData = this.getZbInfos("axis");
var serieRcData = this.getZbInfos("serie");
var serieColorRcData = this.getZbInfos("serieColor");
var axisVarData = this.vardata["axis"];
var serieVarData = this.vardata["serie"];
//看有几个指标
var serieCount = serieRcData.length;
// 收集系列，这里只是指标对应的系列，维度对应的系列是在getSerieConfig的地方生成的
var newSeries = [];
for (var i = 0, len = serieCount; i < len; i++) {
var zbInfos = serieRcData[i];
newSeries.push({
data : serieCount == 1 ? serieVarData : serieVarData[i],
name : zbInfos.caption,
zbname: zbInfos.name
});
}
//重置系列【必须调用】
this.getSeriesObject().resetSeries(newSeries);
//重置坐标轴【根据统计图是否需要有轴来调用】
this.getAxisMgrObject().setCategoryData(axisVarData);
}
//【可选】如果希望在自定义组件预览时显示特定的系列指标名称，可以覆盖父类的默认实现
LineChart.prototype.getPreviewRcData = function(vardata){
return {
axis: [ {
name : "",
caption : "日期"
} ],
serie:[ {
name : "",
caption : "曝光量"
} ],
serieColorRcData:[ {
name : "",
caption : "颜色"
} ]
}
}
/**
* 【必须】获取系列的配置
* @param {ChartSerie} chartSerie 系列对象，注意这里指的属性面板配置的系列
* @param {Number} index 系列的索引
* @returns 返回echart的series部分的配置，可以是单个，也可以是数组
*/
LineChart.prototype.getSerieConfig = function(chartSerie, index) {
//先获取默认的配置
var config = chartSerie.getConfig(), serieCount = this.getRealSerieCount();
//保证系列类型的存在
config.type = config.type || "line";
var serieShow = chartSerie.getProperty("serieShow");
if(serieShow.showZero){
//0值显示
var data = chartSerie.getConfig().data;
//测试0值显示效果：data[2] = "0";
var length = data.length;
for(var i=0;i<length;i++){
if(data[i] === "0"){
data[i] = "-";
}
}
}
//最后一步去取颜色，保证数据都生成好了
var serieColor = this.getSerieColor(chartSerie, index, serieCount);
if(config.type == "line") {
config.lineStyle = config.lineStyle || {};
config.lineStyle.color = serieColor;
}
config.itemStyle = config.itemStyle || {};
if(!config.itemStyle.color) {
config.itemStyle.color = serieColor;//没有设置折点颜色的时候才设置为系列颜色
}
//折点颜色在data里面设置，防止改变折点颜色导致图例颜色进行了修改
if(serieShow.lineColor || serieShow.lineBorderColor){
var data = config.data;
var itemStyle = {};
if(serieShow.lineColor){
itemStyle["color"] = serieShow.lineColor;
}
if(serieShow.lineBorderColor){
itemStyle["borderColor"] = serieShow.lineBorderColor;
}
data.forEach(function(item, index){
var value = {};
value["value"] = item;
value["itemStyle"] = itemStyle;
data[index] = value;
});
}
return config;
}
3）实现自定义组件接口-init方法
/**
* 组件的初始化方法
*
* @params widget 自定义组件对象
* @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]}
*/
function init(widget, vardata) {
widget.lineChart = new LineChart({
wnd:widget.wnd,
widget:widget,
parentElement:widget.basedom
});
widget.lineChart.setVarData(vardata);
widget.lineChart.initChart();
}
4）实现自定义组件接口-refreshDatas方法
/**
* 刷新操作，数据改变时，调用该方法，重新渲染数据
* @param widget 组件对象
* @param vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
* @param storagedata 组件自己需要存储的值，字符串格式
* @returns
*/
function refreshDatas(widget, vardata, storagedata) {
// 清除上次的数据，防止数据错乱
widget.lineChart.setVarData(vardata);
var newchartdata = widget.lineChart.toJson();
widget.lineChart.setOption(newchartdata, true);
}
5）其他的必要方法
/**
* 定义了自定义属性时，必须实现该方法，方法名为setProperty
* 当在属性面板上修改属性后，会调用该方法
* @param key 属性名
* @param value 属性值
* @param widget 组件对象
*/
/**
* 定义了自定义属性时，必须实现该方法，方法名为setProperty
* 当在属性面板上修改属性后，会调用该方法
* @param key 属性名
* @param value 属性值
* @param widget 组件对象
*/
function setProperty(key,value,widget){
return widget.lineChart.setProperty(key,value);
}
/**
* 定义了自定义属性时，必须实现该方法，方法名为getProperty
* 当选中组件时，会调用该方法获取属性值，显示在属性面板上
* @param key 属性名
* @param widget 组件对象
*/
function getProperty(key,widget){
if(widget.lineChart){
return widget.lineChart.getProperty(key);
}
}
/**
* 组件大小改变时执行
*/
function resize(widget) {
widget.lineChart.resize();
}
/*
* 销毁操作,销毁自己相关的东西
*/
function dispose(widget) {
widget.lineChart.dispose();
widget.lineChart = null;
}
2.4属性
统计图的属性设置比较复杂，很多不是普通的输入框下拉框，因此都写定义成了内置的自定义属性对象
1）属性类型说明
目前自定义组件支持选择的属性类型：
属性类型 | 使用说明 | 脚本示例 |
输入框 edit | 直接选择 | |
文本框 textarea | 直接选择 | |
下拉框 select | 选择此类型后，在待选项脚本中返回下拉项的内容 | function userFunc(widget){
return [['top','居上'],['center','居中'],['bottom','居下']];
} |
复选框 checkbox | 直接选择 | |
维下拉框editcombobox | 直接选择 | |
日历框calendarcombobox | 直接选择 | |
颜色拾取框 color | 直接选择 | |
分组 | 选择分组后，在带选项脚本中返回分组的属性 | 如果是tab页: function userFunc(widget){ return {type:"tab"}};
如果是普通group:function userFunc(widget){return {hasswitch:true}}
生成属性普通分组时默认不显示开关组件，如果需要开关组件，需要在待选项函数中返回｛"hasswitch":"true"｝,并且提供相应的set方法处理开关值改边后的效果 |
自定义 custom | 所有不是上方能支持的属性项效果，以及下面几个简单的，都选这个类型。 然后在待选项脚本中返回一个new的自定义的属性对象 对象参考propitems.js里实现即可 | function userFunc(widget){
var gridLines = require("ewonderwidget/dist/resource/js/gridlines");
return new gridLine.GridLine({wnd:widget.wnd});
} |
特殊的几个属性，也可以直接使用，但是需要在"高级编辑"里输入：
属性类型 | 类型 | 使用说明 |
| type改为font 或 custom 在脚本中写它的选项 | function userFunc(widget){return ['fn','sz','stl','cl','agn','vgn'];}
返回的数组中：fn：字体，sz：字号，stl：粗细，cl：颜色,agn：水平位置，vgn：垂直位置。(选项可选) type为custom时，需要加上下面脚本 function userFunc(widget){
var propitems = require("ewonderwidget/dist/resource/js/propitems");
var obj = new propitems.FontCustomEditorItem({wnd:widget.wnd,wids:["fn","sz","stl","cl"]});
return obj;
} |
| type改为editslider | function userFunc(widget){return return {minValue:0,maxValue:100,step:1};} |
| type改为spinner | |
| type改为switch 或者 type未custom | type为custom时，需要加上下面脚本 function userFunc(widget){
var propitems = require("ewonderwidget/dist/resource/js/propitems");
var obj = new propitems.SwitchCustomEditorItem({wnd:widget.wnd});
return obj;
} |
| type改为radiogroup
在脚本中写它的选项 | function userFunc(widget){
return [['top','居上'],['center','居中'],['bottom','居下']];
} |
图片拾取框 | type为 editbrowser 并在type平级的地方增加属性 dlgtype:"img" | |
2）属性配置要求
(1) 所有name都要用小写驼峰的格式
(2) 需要内置的常用对象处理的属性，必须以特定字符开头，系列（serie）、图例（legend）、标题（title）、轴（axis）、背景（background）
(3) 新加的属性，不要通过改代码，去加特定逻辑实现，都通过custom类型实现
(4) 关于属性的联动，都通过下面的方式配置
{
"name": "legendOrient",
"caption": "布局方式",
"type": "select",
"pname": "legendGroup",
"options": "function userFunc(widget){\nreturn [['horizontal','水平'],['vertical','垂直']];\n}\n",
"defattr": "horizontal",
"isedit": "true",
"isshow": "true",
"onchanged": { //refresh、visible、enable可以任选
"refresh":["name1","name2"],//属性值变化时，刷新name1和name2的值
"visible":{
"horizontal":["name3","name4"], //属性值变化时，name3和name4显示，name5和name6隐藏
"vertical":["name5","name6"], //属性值变化时，name3和name4隐藏，name5和name6显示
}，
"enable":{
"horizontal":["name3","name4"], //属性值变化时，name3和name4可用，name5和name6禁用
"vertical":["name5","name6"], //属性值变化时，name3和name4禁用，name5和name6可用
}
}
}
3）属性配置示例
(1) 线状图属性-常用
分组名称 | 分组配置 | 属性名称 | 属性配置 | 属性值 |
常用 | {
"name": "usual",
"caption": "常用",
"type": "group",
"options": "function userFunc(widget){\nreturn {type:\"tab\"}\n}",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": ""
} | 无 | | |
系列(分组) | {
"name": "serie",
"caption": "系列",
"type": "group",
"options": "function userFunc(widget){\nreturn {type:\"float\"}\n}",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "usual"
} | 类型注意必须要有默认值，就是echarts中 serie.type的值 | {
"name": "serieType",
"caption": "类型",
"type": "custom",
"options": "function userFunc(widget){\n var seriesType= require(\"ewonderwidget/dist/resource/js/seriestype\");\n var obj = new seriesType.SeriesType({\n wnd:widget.wnd,\n title:\"类型\",\n type:\"line\"\n });\n return obj;\n}", "defattr": "line",
"isedit": "true",
"isshow": "true",
"pname": "serie"
} | {String} line|bar|horzbar|area |
| | 颜色 | {
"name": "serieColor",
"caption": "颜色",
"type": "custom",
"options": "function userFunc(widget){\n var upload = require(\"ewonderwidget/dist/resource/js/upload\");\n var obj = new upload.UpLoadDlg({\n wnd:widget.wnd,\n title:\"颜色\",\n property:\"serieColor\" });\n return obj;\n}",
"isedit": "true",
"isshow": "true",
"pname": "serie"
} | {field:{},//字段信息 property:{ serieColor:{ type:"custom",//自定义颜色 custom:[["#6c33da","#8f85ee"],["#30cca0","#86f3e0"]] }}} |
| | 大小 | {
"name": "serieSize",
"caption": "大小",
"type": "custom",
"options": "function userFunc(widget){\n var upload = require(\"ewonderwidget/dist/resource/js/upload\");\n var obj = new upload.UpLoadDlg({\n wnd:widget.wnd,\n title:\"大小\",\n property:[{\ntype:\"editslider\",caption:\"线宽\",name:\"lineWidth\",options:{maxValue:100,minValue:1,step:5}\n}] });\n return obj;\n}",
"isedit": "true",
"isshow": "true",
"pname": "serie"
} | {field:{},//字段信息 property:{ lineWidth:"100" //线宽100像素 } } |
| | 数据标志 | {
"name": "serieDataMark",
"caption": "数据标志",
"type": "custom",
"options": "function userFunc(widget){\n var upload = require(\"ewonderwidget/dist/resource/js/upload\");\n var obj = new upload.UpLoadDlg({\n wnd:widget.wnd,\n title:\"数据标志\",\n property:\"serieDataMark\" });\n return obj;\n}",
"isedit": "true",
"isshow": "true",
"pname": "serie"
} | |
| | 提示 | {
"name": "serieTip",
"caption": "提示",
"type": "custom",
"options": "function userFunc(widget){\n var upload = require(\"ewonderwidget/dist/resource/js/upload\");\n var obj = new upload.UpLoadDlg({\n wnd:widget.wnd,\n title:\"提示\",\n property:\"serieTip\"});\n return obj;\n}",
"isedit": "true",
"isshow": "true",
"pname": "serie",
"defattr": "{\"field\":{},\"property\":{\"tipFormat\":\"9\",\"tipBkcl\":\"#333\",\"tipTransp\":\"50\",\"tipFont\":{}}}"
} | |
| | 显示 | {
"name": "serieShow",
"caption": "显示",
"type": "custom",
"options": "function userFunc(widget){\n var upload = require(\"ewonderwidget/dist/resource/js/upload\");\n var obj = new upload.UpLoadDlg({\n wnd:widget.wnd,\n title:\"显示\",\n property:\"serieShow_line\" });\n return obj;\n}",
"isedit": "true",
"isshow": "true",
"pname": "serie"
} | |
标题(分组) | {
"name": "titlegroup",
"caption": "标题",
"type": "group",
"options": "function userFunc(widget){\nreturn {hasswitch:\"true\"}\n}\n",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "usual"
} | 标题 | {
"name": "title",
"caption": "标题",
"type": "custom",
"options": "function userFunc(widget){\n var qtitleprop = require(\"ewonderwidget/dist/resource/js/qtitleprop\");\n var obj = new qtitleprop.QTitleProp({wnd:widget.wnd});\n return obj;\n}",
"isedit": "true",
"isshow": "true",
"pname": "titlegroup"
} | |
图例(分组) | {
"name": "legendGroup",
"caption": "图例",
"type": "group",
"pname": "usual",
"options": "function userFunc(widget){\nreturn {hasswitch:\"true\"}\n}\n",
"defattr": "",
"isedit": "true",
"isshow": "true",
"desc": ""
} | 图例宽度 | {
"name": "legendWidth",
"caption": "图例宽度",
"type": "edit",
"pname": "legendGroup",
"options": "",
"defattr": "20",
"isedit": "true",
"isshow": "true",
"desc": ""
} | |
| | 图例高度 | {
"name": "legendHeight",
"caption": "图例高度",
"type": "edit",
"pname": "legendGroup",
"options": "",
"defattr": "15",
"isedit": "true",
"isshow": "true",
"desc": ""
} | |
| | 布局方式 | {
"name": "legendOrient",
"caption": "布局方式",
"type": "select",
"pname": "legendGroup",
"options": "function userFunc(widget){\nreturn [['horizontal','水平'],['vertical','垂直']];\n}\n",
"defattr": "horizontal",
"isedit": "true",
"isshow": "true",
"desc": ""
} | |
| | 水平安放 | {
"name": "legendX",
"caption": "水平安放",
"type": "select",
"pname": "legendGroup",
"options": "function userFunc(widget){\nreturn [['left','居左'],['center','居中'],['right','居右']];\n}\n",
"defattr": "center",
"isedit": "true",
"isshow": "true",
"desc": ""
} | |
| | 垂直安放 | {
"name": "legendY",
"caption": "垂直安放",
"type": "select",
"pname": "legendGroup",
"options": "function userFunc(widget){\nreturn [['top','居上'],['center','居中'],['bottom','居下']];\n}\n",
"defattr": "top",
"isedit": "true",
"isshow": "true",
"desc": ""
} | |
| | 图例形状 | {
"name": "legendShape",
"caption": "图例形状",
"type": "select",
"options": "function userFunc(widget){\nreturn [['circle','圆形'],['rect','矩形'],['roundRect','圆角矩形'],['triangle','三角形'],['diamond','菱形'],['arrow','箭头']];\n}\n",
"defattr": "circle",
"isedit": "true",
"isshow": "true",
"desc": "",
"pname": "legendGroup"
} | |
| | 字体 | {
"name": "legendFont",
"caption": "字体",
"type": "font",
"pname": "legendGroup",
"options": "function userFunc(widget){\nreturn ['fn','sz','stl','cl'];\n}\n",
"defattr": "",
"isedit": "true",
"isshow": "true",
"desc": ""
} | |
| | 边框 | {
"name": "legendBorder",
"caption": "边框",
"type": "custom",
"options": "function userFunc(widget){\n var propitems = require(\"ewonderwidget/dist/resource/js/propitems\");\n var obj = new propitems.LegendBorderItem({\n wnd:widget.wnd,\n title:\"边框\",\n property:[] });\n return obj;\n}",
"defattr": "",
"isedit": "true",
"isshow": "true",
"desc": "",
"pname": "legendGroup"
} | |
| | 填充 | {
"name": "legendFillColor",
"caption": "填充",
"type": "color",
"pname": "legendGroup",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"desc": ""
} | |
| | 透明度 | {
"name": "legendOpacity",
"caption": "透明度",
"type": "editslider",
"pname": "legendGroup",
"options": "function userFunc(widget){\n return {minValue:0,maxValue:100,step:1}\n}\n",
"defattr": "0",
"isedit": "true",
"isshow": "true",
"desc": ""
} | |
单位 | {
"name": "titleUnitGroup",
"caption": "单位",
"type": "group",
"pname": "usual",
"options": "function userFunc(widget){\nreturn {hasswitch:\"true\"}\n}\n",
"defattr": "",
"isedit": "true",
"isshow": "true",
"desc": "",
"switch": "true"
} | 单位 | {
"name": "titleUnit",
"caption": "单位",
"type": "edit",
"pname": "titleUnitGroup",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"desc": ""
} | |
| | 文字 | {
"name": "titleUnitFont",
"caption": "文字",
"type": "font",
"pname": "titleUnitGroup",
"options": "function userFunc(widget){\nreturn ['fn','sz','cl','stl'];\n}\n",
"defattr": "",
"isedit": "true",
"isshow": "true",
"desc": ""
} | |
| | 垂直方向 | {
"isshow": "true",
"isedit": "true",
"defattr": "top",
"pname": "titleUnitGroup",
"name": "titleUnitY",
"options": "function userFunc(widget){\nreturn [['top','居上'],['center','居中'],['bottom','居下']];\n}\n",
"caption": "垂直方向",
"type": "select",
"desc": ""
}, | |
| | 水平方向 | {
"isshow": "true",
"isedit": "true",
"defattr": "right",
"pname": "titleUnitGroup",
"name": "titleUnitX",
"options": "function userFunc(widget){\nreturn [['left','居左'],['center','居中'],['right','居右']];\n}\n",
"caption": "水平方向",
"type": "select",
"desc": ""
}, | |
(2) 线状图属性-高级
分组名称 | 分组配置 | 属性名称 | 属性配置 |
高级 | {
"name": "advanced",
"caption": "高级",
"type": "group",
"options": "function userFunc(widget){\nreturn {type:\"tab\"}\n}",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": ""
} | 无 | |
背景 | {
"name": "backgroundGroup",
"caption": "背景",
"type": "group",
"pname": "advanced",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"desc": "",
"switch": "true"
} | 透明度 | {
"name": "opa",
"caption": "透明度",
"type": "editslider",
"pname": "backgroundGroup",
"options": "function userFunc(widget){\n return {minValue:0,maxValue:100,step:1}\n}\n",
"defattr": "0",
"isedit": "true",
"isshow": "true",
"desc": ""
} |
| | 背景颜色 | {
"name": "bgcl",
"caption": "背景颜色",
"type": "color",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"desc": "",
"pname": "backgroundGroup"
} |
| | 背景图片 | {
"name": "bgimg",
"caption": "背景图片",
"type": "editbrowser",
"pname": "backgroundGroup",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"desc": "",
"dlgtype": "img"
} |
| | 背景拉伸 | {
"name": "bgsz",
"caption": "背景拉伸",
"type": "select",
"pname": "backgroundGroup",
"options": "function userFunc(widget){\nreturn [['11','双向拉伸'],['10','水平拉伸'],['01','垂直拉伸'],['00','不拉伸']];\n}\n",
"defattr": "00",
"isedit": "true",
"isshow": "true",
"desc": ""
} |
| | 平铺方式 | {
"name": "bgrepeat",
"caption": "平铺方式",
"type": "select",
"options": "function userFunc(widget) {\nreturn [['no-repeat','不平铺'],['repeat-x','横向平铺'],['repeat-y','纵向平铺'],['repeat','平铺']];\n}\n",
"defattr": "repeat",
"isedit": "true",
"isshow": "true",
"pname": "backgroundGroup"
} |
| | 背景位置 | {
"name": "bgpos",
"caption": "背景位置",
"type": "edit",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "backgroundGroup"
} |
坐标轴 | {
"name": "axisGroup",
"caption": "坐标轴",
"type": "group",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "advanced"
} | 坐标轴 | {
"isshow": "true",
"isedit": "true",
"defattr": "",
"pname": "axisGroup",
"name": "axises",
"options": "function userFunc(widget){\n\tvar propitems = require(\"ewonderwidget/dist/resource/js/propitems\");\n\tvar obj = new propitems.CoordinateCustomEditorItem({\n\t\twnd:widget.wnd,\n\t\tbtns: [{caption:\"左轴\",value:\"yLAxis\"},{caption:\"右轴\",value:\"yRAxis\"}, {caption:\"底轴\",value:\"xAxis\"}]\n\t});\n\treturn obj;\n}",
"caption": "启用",
"type": "custom",
"desc": ""
} |
网格线 | {
"name": "axisSplitLinesGroup",
"caption": "网格线",
"type": "group",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "advanced"
} | 网格线 | {
"name": "axisSplitLines",
"caption": "启用",
"type": "custom",
"options": "function userFunc(widget){\n var gridLines = require(\"ewonderwidget/dist/resource/js/gridlines\");\n var obj = new gridLines.GridLines({\n wnd:widget.wnd,\n data:{xAxis:\"1px solid #FFFFFF\"}\n });\n return obj;\n}",
"defattr": "",
"isedit": "true",
"isshow": "true",
"desc": "",
"pname": "axisSplitLinesGroup"
} |
堆积 | {
"name": "serieStack",
"caption": "堆积",
"type": "group",
"options": "function userFunc(widget){\nreturn {hasswitch:\"true\"}\n}\n",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "advanced"
} | 无 | |
参考线 | {
"isshow": "true",
"isedit": "true",
"defattr": "",
"pname": "advanced",
"name": "seriesReferLineGroup",
"caption": "参考线",
"type": "group"
} | | {
"isshow": "true",
"isedit": "true",
"defattr": "",
"pname": "seriesReferLineGroup",
"name": "seriesReferLine",
"options": "function userFunc(widget){\n var propitems = require(\"ewonderwidget/dist/resource/js/propitems\");\n var obj = new propitems.ReferenceCustomEditorItem({wnd:widget.wnd});\n return obj;\n}\n",
"caption": "",
"type": "custom"
} |
数据格式 | {
"name": "dataFormatGroup",
"caption": "数据格式",
"type": "group",
"options": "function userFunc(widget){\nreturn {hasswitch:\"true\"}\n}\n",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "advanced"
} | 1.指标 - 2.舍位 - 3.数据格式 - 4.小数位数 | {
"name": "index",
"caption": "指标",
"type": "edit",
"options": "",
"defattr": "全部指标",
"isedit": "false",
"isshow": "true",
"desc": "",
"pname": "dataFormatGroup"
},
{
"name": "dataFormat",
"caption": "数据格式",
"type": "radiogrouphint",
"options": "function userFunc(widget) {\nreturn [['thousands','千分符'],['percent','百分号','百分号'],['percentage','百分比换算','百分比换算']];\n}\n",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "dataFormatGroup"
},
{
"name": "surrender",
"caption": "舍位",
"type": "select",
"options": "function userFunc(widget) {\nreturn [['1','无'],['10000','万'],['1000000','百万'],['10000000','千万'],['100000000','亿']];\n}\n",
"defattr": "1",
"isedit": "true",
"isshow": "true",
"desc": "",
"pname": "dataFormatGroup"
},
{
"name": "decimalPlace",
"caption": "小数位数",
"type": "spinner",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "dataFormatGroup"
} |
其他 | {
"name": "otherGroup",
"caption": "其他",
"type": "group",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "advanced"
} | 1.展示数据量 - 2.计算规则 - 3.连接方式 - 4.空显示为0 - 5.定时刷新 - 6.维过滤 - 7.自适应 - 8.缓存 - 显示空值项 | {
"name": "datasize",
"caption": "展示数据量",
"type": "edit",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "otherGroup"
},
{
"name": "calcrule",
"caption": "计算规则",
"type": "select",
"options": "function userFunc(widget) {\nreturn [['dimconsistency','按一致性维度进行分析'],['joinfirst','多指标先连接后分组']];\n}\n",
"defattr": "dimconsistency",
"isedit": "true",
"isshow": "true",
"pname": "otherGroup",
"desc": "分析多个主题的指标时，按一致性维度规则处理，即主题的字段分别在自己的主题中与自己主题内的维一起查询，然后多个查询按维度字段关联"
},
{
"name": "linktype",
"caption": "连接方式",
"type": "select",
"options": "function userFunc(widget) {\nreturn [['inherit','继承主题集设置'],['left','左连接'],['right','右连接'],['inner','内连接'],['full','全连接']];\n}\n",
"defattr": "inherit",
"isedit": "true",
"isshow": "true",
"pname": "otherGroup",
"desc": "设置多个子查询间连接方式，表示主查询（最开始进行的查询）连接上子查询的方式"
},
{
"name": "nullsequalzero",
"caption": "空显示为0",
"type": "select",
"options": "function userFunc(widget) {\nreturn [['','无'],['true','是'],['false','否']];\n}\n",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "otherGroup"
}, {
"name": "timedRefresh",
"caption": "定时刷新",
"type": "custom",
"options": "function userFunc(widget){\n\tvar propitems = require(\"ewonderwidget/dist/resource/js/propitems\");\n\tvar obj = new propitems.TimedRefresh({wnd:widget.wnd});\n\treturn obj;\n}\n",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "otherGroup"
}, {
"name": "dimfilter",
"caption": "维过滤",
"type": "select",
"options": "function userFunc(widget) {\nreturn [['0','无'],['1','补足维数据'],['2','过滤不在维中的数据'],['3','以上皆选']];\n}\n",
"defattr": "0",
"isedit": "true",
"isshow": "true",
"pname": "otherGroup"
},
{
"name": "adaptive",
"caption": "自适应",
"type": "switch",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "otherGroup"
},
{
"name": "cache",
"caption": "缓存",
"type": "switch",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "otherGroup"
},
{
"name": "shownull",
"caption": "显示空值项",
"type": "switch",
"options": "",
"defattr": "",
"isedit": "true",
"isshow": "true",
"pname": "otherGroup"
} |
2.5取数
根据统计图对应的行列面板样式设置取数即可。
（1）取数部分
· 行列面板部分：根据统计图对应的行列面板，有几行就配置几个取数【见下方表格】（这个对应的init方法里的vardata数据）
· 属性部分：需要拖入指标维度的属性，也要定义一个取数变量
（2）模型部分
· 将属性面板上的取数设置为隐藏
· 计算方式和数据格式要根据图的属性去设置
· 模型设置对应的是计算时的sql
取数结果格式说明：
### 1个模型：
| dim1 | zb1 | zb2 |
| ----- | ----- | ----- |
| 维度1 | 指标1 | 取数1 |
| 维度2 | 指标2 | 取数2 |
| 维度3 | 指标3 | 取数3 |
| 维度4 | 指标4 | 取数4 |
#### vardata格式
{
dim: ['维度1', '维度2', '维度3', '维度4'],
zb: [['指标1', '指标2', '指标3', '指标4'], ['取数1', '取数2', '取数3', '取数4']]
}
### 2个模型
模型1：
| dim1 | zb1 | zb2 |
| ----- | ----- | ----- |
| 维度1 | 指标1 | 取数1 |
| 维度2 | 指标2 | 取数2 |
| 维度3 | 指标3 | 取数3 |
| 维度4 | 指标4 | 取数4 |
模型2：
dim color 2个取数
| dim1 | color |
| ----- | ----- |
| 维度1 | 颜色1 |
| 维度2 | 颜色2 |
| 维度3 | 颜色3 |
| 维度4 | 颜色4 |
#### vardata格式
[{
dim: ['维度1', '维度2', '维度3', '维度4'],
zb: [['指标1', '指标2', '指标3', '指标4'], ['取数1', '取数2', '取数3', '取数4']]
}, {
dim: ['维度1', '维度2', '维度3', '维度4'],
color: ['颜色1', '颜色2', '颜色3', '颜色4']
}]
序号 | 图表类型 | 行列面板名称 |
1 | 交叉表 | 行维度
列维度
指标 |
2 | 明细表 | 数据 |
3 | 分组表 | 行
列 |
4 | 柱状图 | 轴
系列 |
5 | 象形柱图 | 轴
系列 |
6 | 象形条形图 | 轴
系列 |
7 | 线状图 | 轴
系列 |
8 | 条形图 | 轴
系列 |
9 | 饼图 | 轴
系列 |
10 | 玫瑰图 | 轴
系列 |
11 | 多系列饼图 | 轴
系列 |
12 | 多维度饼图 | 轴
系列 |
13 | 旋转饼图 | 轴
系列 |
14 | 环饼图 | 轴
系列 |
15 | 跑道图 | 轴
系列 |
16 | HTML5饼图 | 轴
系列 |
17 | 交互面圈图 | 轴
系列 |
18 | 嵌套圈饼图 | 轴
系列 |
19 | 面积图 | 轴
系列 |
20 | 横向面积图 | 轴
系列 |
21 | 散点图 | x
y
系列 |
22 | 仪表盘 | 指针 |
23 | 多系列仪表盘 | 系列
指针 |
24 | 占比图 | 总值
占比值 |
25 | 雷达图 | 轴
系列 |
26 | 气泡图 | x
y
r
系列 |
27 | 螺旋气泡图 | x
y
r
系列 |
28 | K线图 | 系列 |
29 | 箱线图 | 轴
系列 |
30 | 漏斗图 | 轴
系列 |
31 | 瀑布图 | 轴
系列 |
32 | 平行坐标图 | 颜色
竖轴 |
33 | 阈值图 | 轴
系列 |
34 | 帕累托图 | 轴
系列 |
35 | 金字塔图 | 轴
系列 |
36 | 极坐标图 | 轴
系列 |
37 | 桑基图 | 轴
流量 |
38 | 组织架构图 | 维度
指标 |
39 | 标准和弦图 | 起点
终点
权重 |
40 | 节点和旋图 | 起点
终点
关系
权重 |
41 | 混合图 | 轴
系列 |
42 | 关系网络 | 源
目标
关系
权重 |
43 | 树形网络 | 源
目标
关系
权重 |
44 | 风险图谱 | 轴
系列 |
45 | 人口图 | 维度
左值
右值 |
46 | 矩形热力图 | 轴
系列 |
47 | 矩形树图 | 轴
流量 |
48 | 标准词云图 | 轴
系列 |
49 | 词云球图 | 轴
系列 |
50 | 单指标卡 | 指标 |
51 | 多指标卡 | 无 |
52 | 股权穿透图 | 投资方
被投资方
探查内容 |
53 | 流向图 | 起始
结束
值 |
54 | 主干线图 | 起始
结束
值 |
55 | 双线图 | 起始
结束
值 |
56 | 渲染地图 | 地区
值 |
57 | 标点地图 | 地区
值 |
58 | 渲染标点地图 | 地区
值 |
59 | 热力图 | 地区
值 |
60 | GIS热力地图 | 经度
纬度
值 |
61 | GIS标点地图 | 经度
纬度
值 |
62 | GIS流向地图 | 起点经度
起点纬度
终点经度
终点纬度 |
63 | GIS路由地图 | 路线编号
站点编号
经度
维度 |
64 | GIS渲染地图 | 经度
纬度
值 |
65 | GIS统计图 | 经度
纬度
值 |
66 | 实时线状图 | 轴
系列 |
67 | 实时柱状图 | 轴
系列 |
68 | 实时混合图 | 轴
系列 |
69 | 预测 | 轴
系列 |
70 | 正态分布 | 数据 |
71 | 聚类 | 数据 |
72 | 回归分析 | x
y |
73 | 相关性矩阵 | 数据 |
2.6配色方案
(1) 配色方案对于统计图来说是一组属性
(2) 跟第5节定义的属性名是对应的，当然，可以也定义额外的属性，只要统计图的对象有处理即可
2.7发布
预览没有问题的时候，发布组件。组件发布后才能使用。
3.组件流程
(1) 拖拽指标或维度–> lineChart.setProperty(option) --> 生成统计图
(2) 修改统计图属性->调用相应对象的setProperty方法 --> 直接刷新属性的相应部分
(3) 再次拖入指标维度->触发计算-> 调用refreshData --> 清空chart->再调用echarts.setOption重新生成图
请先登录