1. 示例效果
1.1. 宏代码效果
显示离指定日期最近的一段时间范围内的数据。
1.2. 预期效果
只显示最近几个月的数据。
- 原始数据：不做任何修改
- 最近3个月：显示筛选器指定日期的 “2017年5月” 前 3 个月的数据
- 最近5个月：显示筛选器指定日期的 “2017年5月” 前 5 个月的数据
2. 操作步骤
- 步骤一：新建一个空白的仪表盘
- 步骤二：拖入三个图形到画布中，图表类型都选择“柱图”，接着选择数据模型“订单模型”
- 步骤三：拖拽相同的字段（维度：订单日期时间维-年月；度量：销售量）到三个图表上，
- 步骤四：拖拽 “维度>订单表>订单日期”到任意图表的筛选器区域内，将筛选器应用于所有图表。
| 注意 |
|---|
由于维度值为“年月”，因此筛选器类型需要同步，右键选择筛选器“订单日期”，设置筛选器类型为“日期>年月”。 该筛选器类型仅供参考，跟所选维度字段的类型一致即可 |
右键选择筛选器“订单日期”，选择“筛选器设置”
设置操作符为“小于等于”，设置默认值为静态值“2017-05”。
- 步骤五：编写宏代码
① 显示最近三个月的数据
进入宏管理界面，新建宏，在新建模块中选择对象为“组件”，对象组件为“最近3个月”，事件：“ ”，对象组件为柱图（该柱图组件名称为“最近3个月”），事件：“ onBeforeRender（组件渲染前）”
把下面宏代码复制到代码区域：
| 代码块 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
//适用于柱图、线图、单Y联合如图、双Y联合图
//筛选器的标题为“订单日期”，若修改筛选器则需要修改下方获取筛选器中的“订单日期”字眼（var datePortlet = page.getPortletsByTitle("订单日期")[0];）
function main(page: IPage, portlet: IEChartsPortlet) {
//近N年，N年月，N年月日，设置输出的条数
var recentCount = 3;
//根据筛选器标题来获取筛选器组件
var datePortlet = page.getPortletsByTitle("订单日期")[0];
//当筛选器没有标题时，需要通过筛选器ID去获取
//var datePortlet = page.getPortletById("替换为筛选器的id")[0]; 根据ID去获取
var datePortletvalue = datePortlet.getValue()[0];
if (!datePortletvalue) {
return;
}
//判断日期维度
var judgeValue = datePortletvalue.split("-");
var dateType = dateTypes(judgeValue);
if (dateType === 0) {
return;
}
//设置近N年（月日）时间列表
datePortletvalue = datePortletvalue.replace(/-/g, "/");
var dateValue = new Date(datePortletvalue);
var dateArry = setArray(dateValue, dateType, recentCount);
let options = portlet.getChartOptions();
let datas = options.series[0].data;
if (!datas || datas.length <= 0) {
return;
}
//判断筛选器维度是否符合图表日期维度
var dataType = (datas[0].displayValue[0]).split("-");
if (dataType.length != dateType) {
return;
}
//设置series和坐标轴
var hasData = setData(options, datas, dateArry);
//获取并设置ToolTip
getToolTip(portlet, options, dateArry);
if (hasData) {
portlet.setChartOptions(options);
} else {
portlet.setChartOptions({});
}
}
//判断日期值类型
function dateTypes(judgeValue: any) {
//年
if (judgeValue.length === 1) {
return 1;
}
//年月
else if (judgeValue.length === 2) {
return 2;
}
//年月日
else if (judgeValue.length === 3) {
return 3;
}
return 0;
}
//设置数据和坐标轴
function setData(options: any, datas: any, dateArry: any) {
var sData = [];
var xaxis = [];
var count = 0;
for (var i = 0; i < datas.length; i++) {
var item = datas[i];
//判断是否在符合条件的日期列表中
if (dateArry.includes(item.displayValue[0])) {
item.rowIndex[0] = count;
item.rowIndex[1] = count;
item.value[0] = count;
sData.push(item);
xaxis.push(options.xAxis.data[i]);
count++;
}
}
//符合条件数据为空
if (sData.length == 0) {
return false;
}
options.series[0].data = sData;
options.xAxis.data = xaxis;
return true;
}
// 获取Tooltip数据
function getToolTip(portlet:any, options:any, dateArry:any) {
let rows: any = []
// 获取Tooltip数据
portlet.getTooltipHandler((row: ITooltipRow, column: ITooltipColumn, rowIndex: number, columnIndex: number, fieldIndex: number) => {
let obj = {
'行数据': row.getValues(),
'字段信息': row.getFields()
}
let ridx: number = Number(rowIndex)
if (!rows[ridx]) rows[ridx] = []
rows[ridx] = obj
})
// 自定义Tooltip信息
setTooltipInfo(options, { rows }, dateArry);
}
//设置TooltipInfo
function setTooltipInfo(options: any, data: any,dateArry:any) {
let result: any = [] // 提示信息
data.rows.forEach((el: any, index: number) => {
let rowData = el['行数据']
let fieldData = el['字段信息']
if (dateArry.includes(rowData[0].value)) {
let buf :any= []
// 构造原来的Tooltip数据信息
rowData.forEach((em:any, edx:number) => {
buf.push(`${fieldData[edx].alias}:${em.value}<br>`)
})
result.push(buf.join(''));
}
})
// 覆写ECharts中tooltip.formatter格式化信息
options.tooltip.formatter = (params: any) => {
return result[params.dataIndex];
}
}
//设置匹配的列表
function setArray(dateValue: any, dateType: any, recentCount: any) {
var arry = []
//年
if (dateType == 1) {
for (var i = 0; i < recentCount; i++){
arry.push(String(dateValue.getFullYear()));
dateValue.setYear(dateValue.getFullYear() - 1);
}
}
//年月
else if (dateType == 2) {
for (var i = 0; i < recentCount; i++){
var month = parseInt(dateValue.getMonth()) + 1;
var dates;
if (month < 9) {
dates = dateValue.getFullYear() + "-" + "0" + month;
} else {
dates = dateValue.getFullYear() + "-" + month;
}
arry.push(dates);
dateValue.setMonth(dateValue.getMonth() - 1);
}
}
//年月日
else {
for (var i = 0; i < recentCount; i++){
var month = parseInt(dateValue.getMonth()) + 1;
var dates;
if (month < 9) {
dates = dateValue.getFullYear() + "-" + "0" + month + "-" + "0" + dateValue.getDate();
} else {
dates = dateValue.getFullYear() + "-" + month + "-" + dateValue.getDate();
}
arry.push(dates);
dateValue.setDate(dateValue.getDate() - 1);
}
}
return arry;
} |
| 注意 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
适配饼图的宏代码则如下所示：
|
② 显示最近5个月的数据：
具体参考“最近3个月”的操作步骤，宏代码仅需更改“recentCount”的值为5即可。
| 代码块 | ||||
|---|---|---|---|---|
| ||||
//近N年，N年月，N年月日，设置输出的条数 var recentCount = 3; |
- 步骤六：点击 保存 保存该宏代码。重新访问报表，可看到效果已实现
