一、学前须知
学习本节课程前需要对于JavaScript、TypeScript语法以及图形扩展属性有一定的了解，在前面的视频中已经讲解了JavaScript、TypeScript语法及图形扩展属性的入门，建议先行学习后再开始本节课程的学习。
二、图形宏简介
当图形需要根据数据，动态展示一些效果的时候，使用扩展属性也难以满足。Smartbi提供了“图形宏”功能，用户能根据需求实现图形的各种动态效果。“图形宏”是报表宏的一部分，是单指作用在ECharts图形对象上的报表宏，用户可以使用“图形宏”实现丰富的图形效果。
注：本次课程主要以讲解仪表盘中的图形宏为主。
注：在新建入口进行创建并选择【对象】为组件，找到相应的组件进行创建。
事件：
onBeforeRender(组件渲染前)：在Smartbi中，onBeforeRender 用于在图形（如ECharts图表）渲染之前执行一些自定义的操作，主要用于修改图形的配置选项
onAfterRender(组件渲染后)：在Smartbi中，onAfterRender 用于在图形（如ECharts图表）渲染完成后执行一些自定义的操作。例如添加额外的交互功能、调整DOM元素、记录日志等。
注：onBeforeRender和onAfterRender实际上是报表中的生命周期的钩子。
2.图形宏中的API
获取相关API文档：
function main(page: IPage, portlet: IPortlet) {
//Page表示整个仪表盘页面
//Portlet表示仪表盘页面中的组件
// 实际宏代码
}
组件获取图表的ECharts属性：portlet.getChartOptions()
组件设置图表的ECharts属性：portlet.setChartOptions(option)
三、案例：如何实现图表只选中当前系列值最高的图例？
需求：当前组件类型为堆积线图展示了各区域各月份的销售额趋势，目前想要实现堆积线图只展示当前年度销售额最高的区域趋势，如何实现？
思考：在图表中实现只展示某个系列，可以通过控制其图例的选中状态来实现（图形扩展属性入门的时候有讲过如何实现设置图例的选中状态）。
那么我们可以直接使用扩展属性来做吗？
由于系列值需要进行计算后才能得出，设置的系列是不确定的，直接通过扩展属性不能实现该需求故需要使用到图形宏代码来实现。
需求宏实现步骤：
1.获取目标图表的ECharts属性。
2.计算出各序列的销售额总和并取到最大值。
3.设置ECharts属性：对该序列进行设置图例为选中状态，其他序列图例设置为不选中的状态。
4.测试验证。
实现宏示例：
function main(page: IPage, portlet: IEChartsPortlet) {
// 获取 echarts 图表配置对象
let opt = portlet.getChartOptions();
// 获取图表中的系列数据（每个数据系列）
let series = opt.series;
// 创建用于存储各系列总和值的数组
let arr = new Array(series.length).fill(0);
// 初始化最大值索引为0（第一个系列）
let maxDataIndex = 0;
// 遍历每个数据系列
for (index in series) {
// 获取当前系列对象
let item = series[index];
// 获取当前系列的数据数组
let data = item.data;
// 遍历当前系列的每个数据点
for (dateIndex in data) {
// 获取数据点的第二个数值（假设数据结构为 [x, y]）
let value = data[dateIndex].value[1];
// 累加到当前系列的总和
arr[index] += value;
}
// 比较并更新最大值索引
if (arr[maxDataIndex] < arr[index]) {
maxDataIndex = index; // 注意这里 index 是字符串类型
}
}
// 图例配置
// 确保 legend 配置对象存在（如果不存在则创建空对象）
opt.legend = opt.legend || {};
// 初始化选中状态对象（清空原有配置）
opt.legend.selected = {};
// 遍历所有系列设置选中状态
for (let idx in series) {
// 获取当前系列名称
const seriesName = series[idx].name;
// 只有当前索引等于最大值索引时设为 true（选中状态）
opt.legend.selected[seriesName] = (idx === maxDataIndex);
console.log(opt.legend.selected)
}
// 将修改后的配置重新应用到图表
portlet.setChartOptions(opt);
}
实现效果：
