Echarts在线免费图表

 
            let title = '售票数量';
let color = ['#23FFF7', '#1786FF', '#FBD74B', '#F86680'];
let value = [];
let data1 = [
    { value: 400, name: '优秀' },
    { value: 389, name: '良好' },
    { value: 489, name: '及格' },
    { value: 259, name: '不及格' },
]
let total = data1.reduce((a, b) => {
    return a + b.value * 1;
}, 0);
option = {
    backgroundColor: 'rgb(0,34,69)',
    color: color,
    tooltip: {
        trigger: 'item',
    },
    legend: {
        orient: 'vertical',
        icon: 'rect',
        x: '70%',
        y: 'center',
        itemWidth: 15,
        itemHeight: 15,
        itemGap: 20,
        align: 'left',
        textStyle: {
            color: 'rgb(132,159,186)',
            fontSize: 15,
            padding: [0, 0, 0, 10],
        },
        formatter(name) {
            let then = option.series[0].data; //获取series中的data
            let total = 0;

            for (let i = 0; i < then.length; i++) {
                if (then[i].name != '' && then[i].name != null && then[i].name != undefined) {
                    total += parseInt(then[i].value);
                }
            }
            var str = '';

            var p = 0;
            for (let i = 0; i < then.length; i++) {
                if (then[i].name == name) {
                    p = (then[i].value / total) * 100;
                    str = name + '       ' + p.toFixed(0) + '%';
                }
            }
            return str;
        },
    },
    series: [
        {
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['35%', '50%'],
            data: data1,
            labelLine: {
                normal: {
                    show: false,
                },
            },
            label: {
                normal: {
                    show: false,
                },
            },
        },
    ],
}