-
右击组件选择组件设置
-
然后点击最下面的自定义属性
-
添加以下代码
// 其他代码省略
"legend": {
// 其他代码省略
"formatter": "function(name) {return name}",
// 这里一定要加formatter 不然宏里面获取不到这一项 无法进行后续操作
},
- 添加之后点击确定和外面的保存按钮
- 然后右击组件选择宏管理
- 选中当前图表右击 新建客户端宏
- 名称自己可以按照对应的功能起一个;事件选择组件渲染后
- 然后输入以下代码
function main(page: IPage, portlet: IEChartsPortlet) {
let options = portlet.getChartOptions() // 获取组件对象 我们要操作的东西基本都在这里面
let optionsData = options.series[0].data // 获取当前图表的一些值 具体内容可以用log打印出来看 在smartbi的页面打开控制台就能看到这里的日志输出
options.legend[0].formatter = (
function (name: any) {
optionsData.forEach(e => {
console.log(e)
if(e.name == name)
name += " : "+e.value[0]+" "+e.label.formatter
})
return name
}
)
// options.legend[0].formatter是我们上面第3步设置的formatter 这里我们直接通过新建一个匿名函数将它替换掉 这样就能输出我们想要的内容了
let chartInstance = portlet.getChartInstance()
setTimeout(() => {
readload() // 重新加载图表 渲染图例内容
}, 10);
function readload() {
chartInstance.setOption(options)
}
}
- 保存宏,然后在组件编辑页面刷新即可看到结果
- 如果没出现想要的效果,可以直接打开控制台查看报错信息