| 提示 | ||
|---|---|---|
| ||
smartbi中的图形对象是独立组件，在仪表分析、透视分析、组合分析、多维分析、灵活分析、地图分析以及未来的电子表格中都有使用。 通过宏代码，可以对图形对象做一些产品默认满足不了的功能，比如：动态修改图形样式，在图形上添加文字，点击图形触发动作等。 |
...
对仪表分析等有图形对象的资源创建宏代码时，可以直接选择图形对象：chart
| 提示 | ||
|---|---|---|
| ||
1、beforeRenderer：图形渲染之前执行，主要用于修改图形样式（options），只能使用图形控件开放的options配置，宏代码执行完成后才刷新图形。 2、afterRenderer：图形渲染之后执行，主要用于对图形做一些后期处理，可以直接操作图形的dom对象，以及调用图形控件的API方法修正dom 3、pointClick:：点击图形对象时触发，主要用于图形跳转处理，可以通过向导设置。 |
beforeRenderer示例代码：以官网示例demo“图形主题”页面中动态散点图为例，说明如何修改图形options。
| 代码块 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
| function main(chartView) {
// 1、获取smartbi中原始图形的options信息,是个json对象
// json对象的内容对应Echarts配置项手册的内容，可参考 1、beforeRenderer：图形渲染之前执行，主要用于修改图形样式（options，就是echarts接收的配置样式，要达到什么效果，修改什么配置需要参考echarts的配置http://echarts.baidu.com/option.html#title // options信息可以通过鼠标中键（滚轮）点击图形获取，是json字符串，可以直接贴到Echarts的官网看效果 var chart = chartView.getChartObject(); var option = chart.getOptions(); // 2、获取option信息后，根据自己的业务需要重新组装options，options的帮助可参考 http://echarts.baidu.com/option.html#title // 比如，获取数据对象并遍历 var series = option.series; for (var i in series) { var seriesItem = series[i]; data = seriesItem.data; delete seriesItem.data; //初始option中去掉data数据，拼在独立的options中。 } var dataOptions = []; // ................... 其它业务逻辑 // 示例逻辑，设置表格对象的右边距 option.grid = { right: '110' //空出位置显示timeline组件 }; // 如果只是修改options，到这里就可以结束了。 // 如果像demo示例，需要把options整个对象的结果改变，则还要注意下面2点： // ................... 其它业务逻辑 // 示例逻辑，使用timeline组件的图形，需要重新组织options var newOptions = { baseOption: option, options: dataOptions }; // 3、把新的options设置到图形对象中， chart.setOptions(newOptions); } |
...
），宏代码执行完成后才刷新图形，所以一般要更改图形的xx展现样式首先想到的是这个宏事件 2、afterRenderer：图形渲染之后执行，主要用于对图形做一些后期处理，可以直接操作图形的dom对象，以及调用图形控件的API方法修正dom 3、pointClick:：点击图形对象时触发，主要用于图形跳转处理，可以通过跳转规则向导设置。 请看简易新增未支持的echarts图形了解宏事件里面接口及方法说明 |
beforeRenderer示例代码：以官网示例demo“图形主题”页面中动态散点图为例，说明如何修改图形options。
