Echarts在线免费图表

 
            var data = [{
    name: '社区矫正人员',
    value: 6
}, {
    name: '民办代教',
    value: 3
}, {
    name: '丝路花海',
    value: 13
}, {
    name: '信访稳控重点人员',
    value: 5
}]
var titleArr = [],
    seriesArr = [];
var sCenter, TitleXy = {};
var colors = [
    ['#1358E3', '#3C4763'],
    ['#F4AE0F', '#3C4763'],
    ['#7A34AB', '#3C4763'],
    ['#7A34AB', '#3C4763']
]
data.forEach(function (item, index) {
    if (index < 2) {
        sCenter = [index * 35 + 30 + '%', '20%']
        TitleXy = {
            left: index * 35 + 30 + '%',
            top: '38%'
        }
    } else {
        sCenter = [(index - 2) * 35 + 20 + '%', '70%']
        TitleXy = {
            left: (index - 2) * 35 + 20 + '%',
            top: '88%'
        }
    }
    titleArr.push({
        text: item.name,
        left: TitleXy.left,
        top: TitleXy.top,
        textAlign: 'center',
        textStyle: {
            fontSize: '16',
            fontWeight: '400',
            color: '#E1FFFE',
            textAlign: 'center',
        },
    });
    seriesArr.push({
        name: item.name,
        type: 'pie',
        clockWise: true,
        roundCap: true,
        barWidth: 60,
        radius: [52, 72],
        itemStyle: {
            normal: {
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
            }
        },
        hoverAnimation: false,
        center: sCenter,
        data: [{
            value: item.value,
            label: {
                normal: {
                    formatter: function (params) {
                        return params.value + '人';
                    },
                    position: 'center',
                    show: true,
                    textStyle: {
                        fontSize: '16',
                        fontWeight: 'bold',
                        color: '#ffffff'
                    }
                }
            },
        }, {
            value: 100 - item.value,
            name: 'invisible',
			tooltip:{
				show:false
			},
            itemStyle: {
                normal: {
                    color: colors[index][1]
                },
                emphasis: {
                    color: colors[index][1]
                }
            }
        }]
    })
});
option = {
   backgroundColor: '#081736',
    title: titleArr,
    series: seriesArr, 
    tooltip: {
        trigger: 'item',
        formatter: '2021年: {c}人'
    },
}