echarts饼图不同样式_echarts饼图新样式

仅做个人收藏记录。

1. 双层饼图

let htjc_option4_data = [
            { value: 78, name: '网上申请合同数', textStyle: { color: '#28b1ff' } },
            { value: 22, name: '线下申请合同数', textStyle: { color: '#1ae562' } },
        ];
option={
            tooltip: {
                trigger: 'item'
            },
            color: ['#28b1ff', '#1ae562'],
            legend: {
                data: [{
                    name: '网上申请合同数',
                    textStyle: {
                        color: '#28b1ff'
                    }
                }, {
                    name: '线下申请合同数',
                    textStyle: {
                        color: '#1ae562'
                    }
                }],
                orient: 'vertical',
                right: '5%',
                top: '5%',
                itemGap: 25,
                itemWidth: 14,
                itemHeight: 14,
                textStyle: {
                    color: 'auto',
                    fontSize: 14,
                    padding: [0, 0, 0, 5],
                    rich: {
                        name: {
                            fontSize: 14,
                            color: '#fff'
                        },
                        b: {
                            fontSize: 14,
                            color: 'auto',
                            fontWeight: 'bold'
                        },
                        v: {
                            fontSize: 14,
                            color: 'auto',
                            fontWeight: 'bold'
                        }
                    }
                },
                icon: 'rect',
                formatter: name => {
                    var data = htjc_option4.series[0].data;
                    var total = 0;
                    var tarValue;
                    for (var i = 0; i < data.length; i++) {
                        total += data[i].value;
                        if (data[i].name == name) {
                            tarValue = data[i].value;
                        }
                    }
                    var v = tarValue;
                    var b = Math.round((tarValue / total) * 100);
                    return '{name|' + name + '}' + '   ' + "{b| " + b + "%}" + ' ' + "{v| " + v + "万平方米}";
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['35%', '55%'],
                    center: ['35%', '62%'],
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false
                    },
                    data: htjc_option4_data
                }, {
                    type: 'pie',
                    radius: ['55%', '65%'],
                    center: ['35%', '62%'],
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: false,
                        },
                    },
                    animation: false,
                    tooltip: {
                        show: false,
                    },
                    data: [
                        {
                            value: 1,
                            itemStyle: {
                                color: "rgba(255,255,255,0.2)",
                            },
                        },
                    ],
                }
            ]
        }

2. 

var ecologicalOption = {
        tooltip: {
            show: false
        },
        color: ['#2a2ac7', '#3657c8', '#53b1f9'],
        legend: {
            left: 'center',
            top: 20,
            itemGap: 20,
            textStyle: {
                color: '#fff',
                fontSize: 12
            }
        },
        series: [
            {
                type: 'pie',
                radius: '55%',
                // top: '6%',
                data: [
                    { value: 1048, name: '供地盘活' },
                    { value: 735, name: '转让盘活' },
                    { value: 580, name: '增容改进' }
                ],
                label: {
                    normal: {
                        show: true,
                        formatter: '{b|{b}}\n{d|{d}%}',
                        rich: {
                            b: {
                                color: '#fff',
                                fontSize: 12,
                                align: 'center',
                                padding: [0, 0, 5, 0]
                            },
                            c: {
                                fontSize: 12,
                                color: '#10d0f5',
                                fontWeight: '700'
                            },
                            d: {
                                fontSize: 12,
                                color: '#baeaf3',
                                fontWeight: '700'
                            }
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 20,
                        length2: 50,
                        lineStyle: {
                            color: '#3874b5',
                            width: 2
                        }
                    }
                }
            }
        ]
    }