echarts中自定义legend图例文字

https://blog.csdn.net/ypjmfc/article/details/78979319

代码是在参考文章基础上修改的:

 
var data = [
            {value:40, name:'货币'},
            {value:20, name:'股票'},
            {value:40, name:'债券'}
        ]
 
option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
                orient: 'vertical',
                right:200,
                y: 'center',
                itemGap:30,
                itemWidth:8,
                padding:10,
                textStyle:{
                    fontSize: 12
                },
                align:'left',
                data: [
                    {
                        name:'货币',
                        icon:'circle'
                    },
                    {
                        name:'股票',
                        icon:'circle'
                    },{
                        name:'债券',
                        icon:'circle'
                    }
                ],
                formatter:  function(name){
                    var total = 0;
                    var target;
                    for (var i = 0, l = data.length; i < l; i++) {
                    total += data[i].value;
                    if (data[i].name == name) {
                        target = data[i].value;
                        }
                    }
                    var arr = [
                        '{a|'+name+' :}{b|'+((target/total)*100).toFixed(2)+'%}'
                        
                    ]
                    return arr.join('\n')
                },
                 textStyle:{
                    rich:{
                        a:{
                            fontSize:20,
                            align:'left',
                            padding:[0,0,0,10]
                        },
                        b:{
                            fontSize:20,
                        
                            align:'right',
                            padding:[0,0,0,10],
                            lineHeight:25
                        }
                    }
                },
               backgroundColor: "#fff"
 
 
 
    }, 
    series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: [50, 80],
                    center: ['50%', '50%'],
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [
                        {
                            value: 40,
                            name: '货币',
                            itemStyle: { normal: { color: "#5877F0" } }
                        },
                        { value: 20, name: '股票', itemStyle: { normal: { color: "#AA9FFD" } } },
                        { value: 40, name: '债券', itemStyle: { normal: { color: "#F96481" } } }
                    ]
                }
            ]
 
};

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值