Echarts在线免费图表

 
            var scaleData = [{
        'name': '总户数',
        'value': 1234
    },
    {
        'name': '总人口数',
        'value': 4700
    },
    {
        'name': '已覆盖户数',
        'value': 1200
    },
    {
        'name': '已覆盖人口数',
        'value': 3687
    }

];
var placeHolderStyle = {
    normal: {
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        color: 'rgba(0, 0, 0, 0)',
        borderColor: 'rgba(0, 0, 0, 0)',
        borderWidth: 0
    }
};
var data = [];
var color = ['rgb(255, 153, 153)', 'rgb(255, 176, 63)', 'rgb(61, 186, 45)', 'rgb(43, 166, 254)'];
var colorBorder = ['rgba(255, 153, 153, 0.4)', 'rgba(255, 176, 63, 0.4)', 'rgba(61, 186, 45, 0.4)', 'rgba(43, 166, 254, 0.4)'];
for (var i = 0; i < scaleData.length; i++) {
    data.push({
        data: scaleData[i].value,
        value: 20,
        name: scaleData[i].name,
        itemStyle: {
            normal: {
                color: color[i],
                borderWidth: 20,
                borderColor: colorBorder[i]
            }
        }
    }, {
        value: 8,
        name: '',
        itemStyle: placeHolderStyle
    });
}
data.push({
    value: 40,
    name: '',
    itemStyle: placeHolderStyle
})
var seriesObj = [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [100, 200],
    hoverAnimation: false,
    startAngle: -30,
    itemStyle: {
        normal: {
            label: {
                show: true,
                position: 'inner',
                fontSize: 14,
                lineHeight: 15,
                formatter: function(params) {
                    var percent = 0;
                    var total = 0;
                    for (var i = 0; i < scaleData.length; i++) {
                        total += scaleData[i].value;
                    }
                    percent = ((params.value / total) * 100).toFixed(0);
                    if (params.name !== '') {
                        // return params.name + '\n' + params.data.data;
                        if (params.name.length > 4) {
                            return params.name.slice(0, 3) + '\n' + params.name.slice(3);
                        } else {
                            return params.name;
                        }

                    } else {
                        return '';
                    }
                }
            },
            labelLine: {
                length: 30,
                length2: 60,
                show: true
            }
        }
    },
    data: data
}, {
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [100, 200],
    hoverAnimation: false,
    startAngle: -30,
    itemStyle: {
        normal: {
            label: {
                show: true,
                position: 'outside',
                fontSize: 18,
                formatter: function(params) {
                    var percent = 0;
                    var total = 0;
                    for (var i = 0; i < scaleData.length; i++) {
                        total += scaleData[i].value;
                    }
                    percent = ((params.value / total) * 100).toFixed(0);
                    if (params.name !== '') {
                        return params.data.data;
                    } else {
                        return '';
                    }
                }
            },
            labelLine: {
                length: 30,
                length2: 60,
                show: true
            }
        }
    },
    data: data
}];
option = {
    backgroundColor: '#fff',
    tooltip: {
        show: false
    },
    legend: {
        show: false
    },
    toolbox: {
        show: false
    },
    series: seriesObj,
    graphic: [{
        type: 'group',
        left: 'center',
        top: 'middle',
        children: [{
                type: 'text',
                z: 100,
                left: 'center',
                top: '0',
                style: {
                    fill: '#333',
                    text: [
                        '治理率(以户数计算)'
                    ],
                    font: '16px Microsoft YaHei'
                }
            },
            {
                type: 'text',
                z: 100,
                left: 'center',
                top: '32',
                style: {
                    fill: 'red',
                    text: [
                        '80%'
                    ],
                    font: '26px Microsoft YaHei'
                }
            }
        ]
    }]
}