Echarts四组饼图在同一个容器中构建的解决方案

构建容器

 var myChart = echarts.init(document.getElementById(id));

配置选项

var option = {
        series: [
            {
                type: 'pie',
                center: ['12.5%', '50%'],
                radius: ['75%', '90%'],
                data: [{
                    value: v1,
                    name: 'cpu',
                    label: {
                        position: 'center',
                        formatter: v1 + '%\n' + 'cpu',
                        textStyle: {
                            color: 'rgba(255,255,255,0.7)',
                            fontSize: 12
                        }
                    },
                    itemStyle: {
                        color: getColor(v1, 80)
                    }
                }, {
                    value: v2,
                    name: '',
                    label: {
                        show: false
                    },
                    itemStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                }]
            }, {
                type: 'pie',
                center: ['37.5%', '50%'],
                radius: ['75%', '90%'],
                data: [{
                    value: v3,
                    name: '硬盘',
                    label: {
                        position: 'center',
                        formatter: v3 + '%\n' + '硬盘',
                        textStyle: {
                            color: 'rgba(255,255,255,0.7)',
                            fontSize: 12
                        }
                    },
                    itemStyle: {
                        color: getColor(v3, 80)
                    }
                }, {
                    value: v4,
                    name: '',
                    label: {
                        show: false
                    },
                    itemStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                }]
            }, {
                type: 'pie',
                center: ['62.5%', '50%'],
                radius: ['75%', '90%'],
                data: [{
                    value: v5,
                    name: '内存',
                    label: {
                        position: 'center',
                        formatter: v5 + '%\n' + '内存',
                        textStyle: {
                            color: 'rgba(255,255,255,0.7)',
                            fontSize: 12
                        }
                    },
                    itemStyle: {
                        color: getColor(v5, 80)
                    }
                }, {
                    value: v6,
                    name: '',
                    label: {
                        show: false
                    },
                    itemStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                }]
            }, {
                type: 'pie',
                center: ['87.5%', '50%'],
                radius: ['75%', '90%'],
                data: [{
                    value: v7,
                    name: '网口',
                    label: {
                        position: 'center',
                        formatter: v7 + '%\n' + '网口',
                        textStyle: {
                            color: 'rgba(255,255,255,0.7)',
                            fontSize: 12
                        }
                    },
                    itemStyle: {
                        color: getColor(v7, 80)
                    }
                }, {
                    value: v8,
                    name: '',
                    label: {
                        show: false
                    },
                    itemStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                }]
            }
        ]
    };

中心设置

var center=['12.5%'，'37.5%'，'62.5%'，'87.5%']//水平中心的位置；

lockdatav Done !