内外双饼图echarts 饼配置项内容和展示

内外双饼图

      var seriesData = [{
    name: "饲料",
    value: "1759"
}, {
    name: "动保",
    value: "1000"
}, {
    name: "添加剂",
    value: "500"
}, {
    name: "海鲜水产",
    value: "300"
}, {
    name: "养殖设备",
    value: "200"
}, {
    name: "礼品保健",
    value: "741"
}, {
    name: "腊味干货",
    value: "600"
}, {
    name: "米面油粮",
    value: "400"
}, {
    name: "水果干果",
    value: "510"
}];


let echartData = {
    inner: [{
    name: "腊味干货",
    value: "600"
}, {
    name: "米面油粮",
    value: "400"
}, {
    name: "水果干果",
    value: "510"
}],
    outer: seriesData
};

var colorList1 = [{
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#2E2EE6' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#2E2EE6' // 100% 处的颜色
    }],
}, {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#E6174B' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#E6174B' // 100% 处的颜色
    }],
}, {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#30BF30' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#30BF30' // 100% 处的颜色
    }],
}];
var colorList2 = [{
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#24B383' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#24B383' // 100% 处的颜色
    }],
}, {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#00AACC' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#00AACC' // 100% 处的颜色
    }],
}, {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#0066FF' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#0066FF' // 100% 处的颜色
    }],
}, {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#4400CC' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#4400CC' // 100% 处的颜色
    }],
}, {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#C500CC' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#C500CC' // 100% 处的颜色
    }],
}, {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#E60000' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#E60000' // 100% 处的颜色
    }],
}, {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#FA8219' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#FA8219' // 100% 处的颜色
    }],
}, {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#BF9926' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#BF9926' // 100% 处的颜色
    }],
}, {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#9BBF30' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#9BBF30' // 100% 处的颜色
    }],
}];
option = {
    backgroundColor: '#000',
    series: [{
            color: colorList1,
            // color: '#ccc',
            type: 'pie',
            hoverOffset: 0,
            hoverAnimation: false,
            radius: ['40%', '30%'],
            itemStyle: {
                normal: {
                    // borderColor: 'rgba(28,33,46,0.6)',
                    backgroundColor: '#ccc',
                    borderWidth: 4,
                }
            },
            label: {
                normal: {
                    position: 'inner',
                    fontSize: 14,
                    formatter: params => {
                        return (
                            '{name|' + params.name + '}'
                        );
                    },
                    padding: [0, -130, 25, -130],
                    rich: {
                        color: '#fff',
                        name: {
                            fontSize: 14,
                            padding: [0, 0, 3, 0],
                            color: '#fff'
                        },
                        percent: {
                            fontSize: 14,
                            color: '#fff',
                            padding: [0, 0, 17, 0],
                        },
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: echartData.inner
        },
        {
            type: 'pie',
            color: colorList2,
            radius: ['40%', '50%'],
            data: echartData.outer,
            itemStyle: {
                normal: {
                    // borderColor: 'rgba(28,33,46,0.6)',
                    backgroundColor: '#fff',
                    // borderWidth: 4,
                }
            },
            labelLine: {
                normal: {
                    length: 20,
                    length2: 0,
                    lineStyle: {
                        color: '#C8C8C8'
                    }
                }
            },
            label: {
                normal: {
                    formatter: params => {
                        return '{name|' + params.name + '}\n{hr|}\n{percent|' + params.value + '万元}  {percent|' + params.percent + '%} '
                    },
                    distanceToLabelLine: 0,
                    padding: [-2, 0, 0, 0],
                    rich: {
                        name: {
                            color: "#fff",
                            fontSize: 13,
                            padding: [6, 10],
                            align: 'left'
                        },
                        percent: {
                            color: "#fff",
                            align: 'center',
                            fontSize: 13,
                            padding: [5, 10]
                        },
                        hr: {
                            borderColor: '#fff',
                            width: '100%',
                            borderWidth: 0.5,
                            height: 0,
                        }
                    }
                }
            },
        }
    ]
};