Echarts在线免费图表

 
            let list = [
    { percent: 3.45, name: "10岁以下", value: 174 },
    { percent: 6.9, name: "10-18岁", value: 254 },
    { percent: 10.34, name: "18-30岁", value: 343 },
    { percent: 41.38, name: "30-40岁", value: 1255 },
    { percent: 3.45, name: "40-60岁", value: 1442 },
    { percent: 16, name: "60岁以上", value: 1045 }
]
let sum = list.reduce((cur, pre) => {
    return cur + pre.value;
}, 0);
var nameArray = list.map(item => {
    return item.name + '\t\t\t' + item.value + '个' + '\t\t\t' + item.percent + '%'
})

var color = ['#36F097', '#3DFFDC', '#5A3FFF', '#268AFF', '#1ED6FF', '#ADE1FF']
var data = [];
for (var i = 0; i < list.length; i++) {
    data.push({
        value: list[i].value,
        name: list[i].name + '\t\t\t' + list[i].value + '个' + '\t\t\t' + list[i].percent + '%',
        itemStyle: {
            borderWidth: 6,
            borderColor: color[i],
        }
    });
}
option = {
    backgroundColor: "#061740",
    color: color,
    tooltip: {
        trigger: 'item'
    },
    title: {
        text: sum,
        subtext: 'Total',
        left: '40%',
        top: '45%',
        textAlign :'center',
        textStyle: {
            color: '#fff',
            fontSize: 48,
        },
        subtextStyle: {
            fontSize: 28,
            color: 'rgba(255, 255, 255, 0.60)'
        },
    },
    legend: [{
        orient: 'vertical',
        data: nameArray,
        icon: 'rect',
        left: 'right',
        top: 'center',
        align: 'left',
        itemGap: 30,
        textStyle: {
            color: '#fff',
            fontSize: "1rem",
        },
        //图例标记的图形高度
        itemHeight: 10,
        //图例标记的图形宽度
        itemWidth: 10,
    }],
    series: [{
        name: '',
        type: 'pie',
        clockwise: false,
        radius: ['70%', '90%'],
        width: "80%",
        height: "55%",
        emphasis: {
            scale: false
        },
        center: ['50%', '50%'],
        top: "center",
        label: {
            show: false,
            position: 'inside',
            color: '#fff',
            formatter: function (params) {
                console.log(params)
                return params.percent + '%'
            }
        },
        data: data
    }]
};