Echarts动态设置提示语样式

Question

使用echarts制作环表时，样式上遇到这么一个需求，目前做到的效果如下图：

需求要求红框标记里的绿色区域背景色和环表区域保持同步
demo代码如下：

app.title = '环形图';

option = {
    title:{
        text:'aaaa',
        top:'50%',
        left:'50%'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    formatter:function(){
                        var str="{a|{a}} \n{b|{b}}: {c} {c|{d}%}"
                        return str;
                    },
                     rich:{
                    a: {
                color:'#000'
              },
               b: {
                 color:'red'
              },
              c:{
                  color: '#fff',
                backgroundColor: 'green',
                align: 'right',
                padding: [2, 4],
                borderRadius: 50
              },
                }
                },
                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:'搜索引擎'}
            ]
        }
    ]
};

Answer 1

可以先在rich里面定义好颜色，如下面的color0 color1 color2等等，每个color代表不同的颜色，color后面的0 1 2是索引，然后formatter里面就可以直接用了。用了es6的写法，加/斜杠是为了转义下大括号。

option = {
    title: {
        text: 'aaaa',
        top: '50%',
        left: '50%'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    formatter: function (params) {
                        console.log(params)
                        const seriesName = params.seriesName;
                        const name = params.name;
                        const value = params.data.value;
                        const percent = params.percent + '%';
                        const index = params.dataIndex;
                        return `\{a|${seriesName}\} \n\{b|${name}\}: \{a|${value}\} \{color${index}|${percent}\}`
                    },
                    rich: {
                        a: {
                            color: '#000'
                        },
                        b: {
                            color: 'red'
                        },
                        c: {
                            color: '#fff',
                            backgroundColor: 'green',
                            align: 'right',
                            padding: [2, 4],
                            borderRadius: 50
                        },
                        color0: {
                            color: '#fff',
                            backgroundColor: '#c23531',
                            align: 'right',
                            padding: [2, 4],
                            borderRadius: 50
                        },
                        color1: {
                            color: '#fff',
                            backgroundColor: '#2f4554',
                            align: 'right',
                            padding: [2, 4],
                            borderRadius: 50
                        },
                        color2: {
                            color: '#fff',
                            backgroundColor: '#61a0a8',
                            align: 'right',
                            padding: [2, 4],
                            borderRadius: 50
                        },
                        color3: {
                            color: '#fff',
                            backgroundColor: '#d48265',
                            align: 'right',
                            padding: [2, 4],
                            borderRadius: 50
                        },
                        color4: {
                            color: '#fff',
                            backgroundColor: '#d48265',
                            align: 'right',
                            padding: [2, 4],
                            borderRadius: 50
                        },
                        color4: {
                            color: '#fff',
                            backgroundColor: '#91c7ae',
                            align: 'right',
                            padding: [2, 4],
                            borderRadius: 50
                        }
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                {
                    value: 335,
                    name: '直接访问'
                },
                {
                    value: 310,
                    name: '邮件营销'
                },
                {
                    value: 234,
                    name: '联盟广告'
                },
                {
                    value: 135,
                    name: '视频广告'
                },
                {
                    value: 1548,
                    name: '搜索引擎'
                }
            ]
        }
    ]
};

Answer 2

自定义每个扇形的颜色