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

pie

      var uploadedDataURLblue = "/asset/get/s/data-1596261792887-rfxw9oPbZ.png";

var uploadedDataURLgreen = "/asset/get/s/data-1596261779112-YOj9zlVq0.png";

let data = [{
    name: '人工智能',
    value: 109,
    icon:uploadedDataURLgreen
}, {
    name: '智慧能源',
    value: 165,
    icon:uploadedDataURLblue
}, {
    name: '智能制造',
    value: 208,
     icon:uploadedDataURLblue
}, {
    name: '智慧医疗',
    value: 113,
    icon:uploadedDataURLgreen
}, {
    name: '智慧教育',
    value: 185,
    icon:uploadedDataURLblue
}, {
    name: '智慧城市',
    value: 198,
    icon:uploadedDataURLblue
}];


let titleArr = [],
    legendArr = [],
    seriesArr = [],
    total = 0,
colors = [
    ['#0b2a50', '#3da9b8', '#58d3bd', '#62e3bf'],
    ['#0b2a50', '#1265ce','#1987d2','#1c94d4'],
    ['#0b2a50', '#1265ce','#1987d2','#1c94d4'],
    ['#0b2a50', '#3da9b8', '#58d3bd', '#62e3bf'],
    ['#0b2a50', '#1265ce','#1987d2','#1c94d4'],
    ['#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 < 3) {

            titleArr.push({
                text: data[i].name,
                left: (i ) * 30 + 19  + '%',
                top: '39%',
                textAlign: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 12,
                    color: '#a7d4e2',
                    textAlign: 'center',
                },
            });
            legendArr.push({
                left: (i ) * 30 + 30 + '%',
                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 ) * 30 + 20 + '%', '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: total - 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 - 3) * 30 + 19 + '%',
                top: '91%',
                textAlign: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 12,
                    color: '#a7d4e2',
                    textAlign: 'center',
                },
            });
            legendArr.push({
                left: (i - 3) * 30 + 30 + '%',
                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 - 3) * 30 + 20 + '%', '72%'],
                radius: ['25%', '35%'],

                itemStyle: {
                    normal: {

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

                data: [{
                    value: data[i].value,
                    itemStyle: {
                        normal: {
                            color: colors[i][1],
                            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: total - 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
}