人工智能echarts 饼配置项内容和展示

pie

      var uploadedDataURLblue = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2RTc0RDJERDNBQjExRUFBRjA5RkExRUYzQjc0QjU1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2RTc0RDJFRDNBQjExRUFBRjA5RkExRUYzQjc0QjU1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZFNzREMkJEM0FCMTFFQUFGMDlGQTFFRjNCNzRCNTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZFNzREMkNEM0FCMTFFQUFGMDlGQTFFRjNCNzRCNTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7uAuj3AAAAnUlEQVR42mL8//8/AwiIl19UAFLJDBAw92Wn/gMQg4UBAbSBuAbKPgHEYAVMSAp+YGMjK/iPjY2sgBEbmwnoOE0o+z6SgvtQh2sxipVduAJkn4HiiVAF+UBsAsSmIAXGUElku2FWmDAB/XsWyAhFkoBJhoDkwI4EMtYgGQ8CE4Bia8E6YCEJddRLIPUPKCkJE0MOSRDwRAsPBoAAAwCytzBsqWObCQAAAABJRU5ErkJggg==";

var uploadedDataURLgreen = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFBNEFFMkFERDNBQjExRUFBMjBERjBGNjQwMUIwOTMwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFBNEFFMkFFRDNBQjExRUFBMjBERjBGNjQwMUIwOTMwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUE0QUUyQUJEM0FCMTFFQUEyMERGMEY2NDAxQjA5MzAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUE0QUUyQUNEM0FCMTFFQUEyMERGMEY2NDAxQjA5MzAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz475tTKAAAAnUlEQVR42mL8//8/AwzYHAwwAlL/j9hvOA8TY2FABduB+B8QS8IEmJB0TwBSYkAsAWT3w8QZQVYABUKA7NVopoUArVrLaH3A3xjIOQMVhDmIEUqbgKxYCMW5UAX/oWyQ2CKQglCgUQlAehvUTSC8DSoWygRkXIcap4hkP5gNlLvGhCT4HxsbWQEjNjayAg5sbOSQvArELUhsMAAIMACTaC52fFy0LgAAAABJRU5ErkJggg==";

let data = [{
    name: '氧气',
    value: 0.001,
    icon: uploadedDataURLgreen
}, {
    name: '一氧化碳',
    value: 0.001,
    icon: uploadedDataURLblue
}, {
    name: '硫化氢',
    value: 0.001,
    icon: uploadedDataURLgreen
}, {
    name: '甲烷',
    value: 0.002,
    icon: uploadedDataURLblue
}];


let titleArr = [],
    legendArr = [],
    seriesArr = [],
    total = 0,
    colors = [
        ['#0b2a50', '#3da9b8', '#58d3bd', '#62e3bf'],
        ['#0b2a50', '#1265ce', '#1987d2', '#1c94d4'],
        ['#0b2a50', '#3da9b8', '#58d3bd', '#62e3bf'],
        ['#0b2a50', '#1265ce', '#1987d2', '#1c94d4'],

    ]
for (let i = 0; i < data.length; i++) {
    total += data[i].value
}

for (let i = 0; i < data.length; i++) {

    if (i < 2) {

        titleArr.push({
            text: data[i].name,
            left: (i) * 40 + 28 + '%',
            top: '39%',
            textAlign: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 12,
                color: '#a7d4e2',
                textAlign: 'center',
            },
        });
        legendArr.push({
            left: (i) * 40 + 43 + '%',
            top: '3%',
            itemWidth: 8,
            itemHeight: 12,

            data: [{
                name: data[i].name,
                icon: 'image://' + data[i].icon

            }],
            textStyle: {
                fontSize: 12, //字体大小
                color: 'transparent', //字体颜色
            },

        })
        seriesArr.push({
            name: data[i].name,
            type: 'pie',
            clockWise: true,
            center: [(i) * 40 + 30 + '%', '20%'],
            radius: ['25%', '35%'],
            itemStyle: {
                normal: {

                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                }
            },
            hoverAnimation: false,

            data: [{
                value: data[i].value,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: colors[i][1]
                            }, {
                                offset: 0.5,
                                color: colors[i][2]
                            },
                            {
                                offset: 1,
                                color: colors[i][3]
                            }
                        ]),

                        shadowColor: colors[i][1],
                        shadowBlur: 0,

                    }
                },
                label: {
                    normal: {
                        formatter: function(params) {
                            return params.value;
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            fontWeight: 'bold',
                            fontFamily: 'Verdana',
                            color: '#eefafb'
                        }
                    }
                },
            }, {
                value: data[i].value,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: colors[i][0]
                    },
                    emphasis: {
                        color: colors[i][0]
                    }
                }
            }]
        })

    } else {
        titleArr.push({
            text: data[i].name,
            left: (i - 2) * 40 + 28 + '%',
            top: '91%',
            textAlign: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 12,
                color: '#a7d4e2',
                textAlign: 'center',
            },
        });
        legendArr.push({
            left: (i - 2) * 40 + 40 + '%',
            top: '50%',
            itemWidth: 8,
            itemHeight: 12,

            data: [{
                name: data[i].name,
                icon: 'image://' + data[i].icon

            }],
            textStyle: {
                fontSize: 12, //字体大小
                color: 'transparent', //字体颜色
            },

        })
        seriesArr.push({
            name: data[i].name,
            type: 'pie',
            clockWise: true,
            center: [(i - 2) * 40 + 30 + '%', '72%'],
            radius: ['25%', '35%'],

            itemStyle: {
                normal: {

                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                }
            },
            hoverAnimation: false,

            data: [{
                value: data[i].value,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: colors[i][1]
                            }, {
                                offset: 0.5,
                                color: colors[i][2]
                            },
                            {
                                offset: 1,
                                color: colors[i][3]
                            }
                        ]),

                        shadowColor: colors[i][1],
                        shadowBlur: 0,


                    }
                },
                label: {
                    normal: {
                        formatter: function(params) {
                            return params.value;
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            fontWeight: 'bold',
                            color: '#eefafb'
                        }
                    }
                },
            }, {
                value: data[i].value,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: colors[i][0]
                    },
                    emphasis: {
                        color: colors[i][0]
                    }
                }
            }]
        })
    }
}


option = {
    backgroundColor: '#000f1e',
    title: titleArr,
    legend: legendArr,
    series: seriesArr
}