Echarts在线免费图表

 
            let bgColor = '#fff';
let title = '总量';
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
let echartData = [{
        name: "业绩",
        value: "3720"
    },
    {
        name: "创新",
        value: "2920"
    },
    {
        name: "敬业",
        value: "2200"
    },
    {
        name: "忠诚",
        value: "1420"
    },
    {
        name: "公益",
        value: "500"
    }
];

let formatNumber = function(num) {
    let reg = /(?=(\B)(\d{3})+$)/g;
    return num.toString().replace(reg, ',');
}
let total = echartData.reduce((a, b) => {
    return a + b.value * 1
}, 0);

option = {
    backgroundColor: bgColor,
    color: color,
    // tooltip: {
    //     trigger: 'item'
    // },
    title: [{
        text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
        top: 'center',
        left: 'center',
        textStyle: {
            rich: {
                name: {
                    fontSize: 65,
                    fontWeight: 'normal',
                    color: '#666666',
                    padding: [10, 0]
                },
                val: {
                    fontSize: 65,
                    fontWeight: 'bold',
                    color: '#333333',
                }
            }
        }
    },{
        text: '单位：个',
        top: 20,
        left: 20,
        textStyle: {
            fontSize: 14,
            color:'#666666',
            fontWeight: 400
        }
    }],
     legend: {
         orient: 'vertical',
         icon: 'rect',
         x: '85%',
         y: 'center',
         itemWidth: 12,
         itemHeight: 12,
         align: 'left',
         textStyle: {
             rich: {
                 name: {
                     fontSize: 32
                 },
                 value: {
                     fontSize: 16,
                     padding: [0, 5, 0, 15]
                 },
                 unit: {
                     fontSize: 12
                 }
             }
         },
         formatter: function(name) {
             let res = echartData.filter(v => v.name === name);
             res = res[0] || {};
             let unit = res.unit || '';
             return '{name|' + name + '}'
         }
         // data: legendName
     },
    series: [{
        type: 'pie',
        radius: ['45%', '60%'],
        center: ['50%', '50%'],
        data: echartData,
        hoverAnimation: false,
        itemStyle: {
            normal: {
                borderColor: bgColor,
                borderWidth: 2
            }
        },
        labelLine: {
            normal: {
                length: 20,
                length2: 120,
                lineStyle: {
                    color: '#e6e6e6'
                }
            }
        },
        label: {
            normal: {
                formatter: params => {
                    return (
                        '{icon|●}{name|' + params.name + '}{value|' +
                        formatNumber(params.value) + '}'
                        // + ' ' + params.percent + '%'
                    );
                },
                padding: [0 , -100, 25, -100],
                rich: {
                    icon: {
                        fontSize: 20
                    },
                    name: {
                        fontSize: 28,
                        padding: [0, 10, 0, 4],
                        color: '#666666'
                    },
                    value: {
                        fontSize: 28,
                        fontWeight: 'bold',
                        color: '#333333'
                    }
                }
            }
        },
    }]
};