Echarts 自定义图例样式

最新推荐文章于 2024-07-31 11:20:46 发布

qq_41873880

最新推荐文章于 2024-07-31 11:20:46 发布

阅读量586

点赞数 1

文章标签： web app

本文链接：https://blog.csdn.net/qq_41873880/article/details/118579297

版权

legend: {
                        x: '50%' ,//居右显示
                        top: '0%',
                        orient: 'vertical',
                        itemWidth: 10,             // 图例图形宽度
                        itemHeight: 10,            // 图例图形高度
                        icon: "emptyCircle",
                        formatter:function(name){  //该函数用于设置图例显示后的百分比
                            var data = list;
                            var total = 0;
                            var value;
                            list.forEach((item)=>{
                                total += item.value;
                                if (item.name == name) {
                                    value = item.value;
                                }
                            })
                            var arr = [
                                '{a|'+name+'}'+
                                '{b|'+(Math.round(((value / total) * 100)))+'}'+
                                '{c|'+'%'+'}'
                            ]
                            return arr;//返回出图例所显示的内容是名称+百分比
                        },
                        textStyle:{
                            rich:{
                                a:{
                                    width:80,
                                    fontSize:12,
                                    color:'#4D4D4D',
                                    align:'left',
                                    padding:[0,30,0,0],
                                },
                                b:{
                                    fontSize:16,
                                    align:'left',
                                    color: '#131313',
                                    borderBottomStyle: {
                                        borderBottomColor: '#131313',
                                        borderBottomWidth: 5
                                    },

                                },
                                c:{
                                    fontSize:12,
                                    align:'left',
                                    color: '#131313',
                                },
                            }
                        },