echarts图标legend图例文字格式化

刚做项目碰到一个问题,需要对图例文字加入其他数据,以及进行格式化。查了很多文档以及进行多次实验,现在对有需要的同学提供一个参考,觉得有用点个赞,感谢。
在这里插入图片描述
代码片段如下:

    legend: {
        orient: 'vertical',
        type: 'scroll',
        icon: 'circle',
        right: '10%',
        top: 26,
        itemWidth: 10,
        itemGap: 12,
        // selectedMode: false,
        data: channels,
        formatter: name => {
            let params1, params2;
            // 图例的 69.43%,150832,name是图例文字描述,for循环是格式化
            for(let i=0, len=this.ringChartData.length; i<len; i++) {
                if(this.ringChartData[i]['渠道名称'] == name) {
                    params1 = (this.ringChartData[i]['占比']*100).toFixed(2) + '%';
                    params2 = this.ringChartData[i]['值'];
                };
            };
            let arr = [
                '{a|'+ name +'}',
                '{b|'+ params1 +'}',
                '{c|'+ params2 +'}',
            ];
            return arr.join('');
        },
        textStyle: {
            rich: {
                a: {
                    width: 50,
                    padding: [0,14,0,0]
                },
                b: {
                    align: 'left',
                    width: 40,
                    padding: [0,10,0,0]
                },
                c: {
                    align: 'left',
                },
            }
        }
    },
    series: [
     {
         name: '访问来源',
         type: 'pie',
         // hoverAnimation: false,
         width: '50%', // 饼图占据canvas的宽度
         radius: ['50%', '70%'],
         color: ['#3c90f7', '#55bfc0', '#5ebe67', '#f4cd49', '#e05667', '#7c4bd8'],
         avoidLabelOverlap: false,
         stillShowZeroSum: false,
         itemStyle: {
             borderColor: '#fff',
             borderWidth: 1,
             borderType: 'solid'
         },
         labelLine: {
             show: false
         },
         label: {
             show: false,
             position: 'center'
         },
         emphasis: {
             label: {
                 show: true,
                 fontSize: '18',
                 formatter: '{b}\n{c}'
             }
         },
         data: orgvs
     }
 ]
  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值