echart 图例legend 中显示文字+数字百分比

1、效果如图

2、主要是设置legend中的formatter

formatter: function(name) {
                    // pieData是饼图的数组数据
                    let data = pieData;
                    let total = 0;
                    let tarValue = 0;
                    for (let i = 0, l = data.length; i < l; i++) {
                        total += parseInt(data[i].value);
                        if (data[i].name == name) {
                            tarValue = data[i].value;
                        }
                    }
                    let arr = [
                        '{a|'+name+'}',
                        '{b|'+((tarValue/total)*100).toFixed(2)+'%}'
                    ]
                    return arr.join('')
                },

 

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
ECharts(百度开源的一个数据可视化库)图例可以通过设置 legend 属性来显示。 首先,需要在 ECharts 的配置项添加 legend 属性,并设置该属性的 data 值,即图例显示的内容。例如: ``` option = { // 其他配置项 legend: { data: ['销量'] }, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } ``` 在上面的代码legend 属性的 data 值为 ['销量'],表示图例显示的内容为“销量”。同时,在 series ,name 值也为“销量”,这样就能将该 series 显示图例。 如果需要显示多个 series 的图例,只需在 legend 的 data 添加相应的名称,例如: ``` option = { // 其他配置项 legend: { data: ['销量', '利润'] }, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }, { name: '利润', type: 'line', data: [10, 30, 20, 15, 25, 18] }] } ``` 在上面的代码legend 的 data 值为 ['销量', '利润'],表示图例显示的内容为“销量”和“利润”。同时,series 有两个 series,分别为“销量”和“利润”,并且它们的 name 值与 legend 的 data 值对应,这样就能将它们都显示图例。 除了默认显示在图表的上方,图例的位置也可以通过设置 legend 属性的 x 和 y 值来调整,例如: ``` option = { // 其他配置项 legend: { data: ['销量'], x: 'center', y: 'bottom' }, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } ``` 在上面的代码legend 的 x 值为'center',表示图例水平居;y 值为'bottom',表示图例垂直方向显示在底部。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值