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

最新推荐文章于 2022-12-22 16:48:06 发布

admin_rdc

最新推荐文章于 2022-12-22 16:48:06 发布

阅读量927

点赞数 1

文章标签：前端 echarts smartbi javascript vue.js

本文链接：https://blog.csdn.net/weixin_43711783/article/details/122236177

版权

效果图：
想要的样式

右击组件选择组件设置
然后点击最下面的自定义属性
添加以下代码

// 其他代码省略
"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)    
    }
}