Smartbi环形图图例legend后面加百分比

Smartbi环形图图例legend后面加百分比

  1. 右击组件选择组件设置
    Smartbi环形图图例legend后面加百分比

  2. 然后点击最下面的自定义属性
    Smartbi环形图图例legend后面加百分比

  3. 添加以下代码

// 其他代码省略
"legend": {
		// 其他代码省略
		"formatter": "function(name) {return name}",
		// 这里一定要加formatter 不然宏里面获取不到这一项 无法进行后续操作
	},
  1. 添加之后点击确定和外面的保存按钮
  2. 然后右击组件选择宏管理
    Smartbi环形图图例legend后面加百分比
  3. 选中当前图表右击 新建客户端宏
    Smartbi环形图图例legend后面加百分比
  4. 名称自己可以按照对应的功能起一个;事件选择组件渲染后
    Smartbi环形图图例legend后面加百分比
  5. 然后输入以下代码
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)    
    }
}
  1. 保存宏,然后在组件编辑页面刷新即可看到结果
  2. 如果没出现想要的效果,可以直接打开控制台查看报错信息
上一篇:https


下一篇:Linux应用之串口编程