Echarts 饼图 图例修改，legend样式修改

1. 效果如图，应用了echarts官网的饼图例子作说明

2. 配置如下

var data=[
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                        { value: 234, name: '联盟广告' },
                        { value: 135, name: '视频广告' },
                        { value: 1548, name: '搜索引擎' }
                    ]
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
                icon:"circle",
                formatter:function(name){
                    let target;
                    for(let i=0;i<data.length;i++){
                        if(data[i].name===name){
                            target=data[i].value
                        }
                    }
                    let arr=["{a|"+target+"}","{b|"+name+"}"]
                    return arr.join("\n")

                },
                textStyle:{
                    rich:{
                        a:{
                            fontSize:16,
                            color:"#EA5504",
                            padding:10
                        },
                        b:{
                            fontSize:14,
                            color:"#333"
                        }
                    }
                }

            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                        { value: 234, name: '联盟广告' },
                        { value: 135, name: '视频广告' },
                        { value: 1548, name: '搜索引擎' }
                    ]
                }
            ]
        };

3 分析

• 3.1 图例图标修改

 icon:"circle",

• 3.2 图例 标题样式修改,lenged 对象里的修改

 legend: {
                orient: 'vertical',
                x: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
                icon:"circle",
                formatter:function(name){
                    let target;
                    for(let i=0;i<data.length;i++){
                        if(data[i].name===name){
                            target=data[i].value
                        }
                    }
                    let arr=["{a|"+target+"}","{b|"+name+"}"]
                    return arr.join("\n")

                },
                textStyle:{
                    rich:{
                        a:{
                            fontSize:16,
                            color:"#EA5504",
                            padding:10
                        },
                        b:{
                            fontSize:14,
                            color:"#333"
                        }
                    }
                }

主要是应用了富文本样式，具体可以查看Echarts官方API