LargeScreenVisualization/viewdata-master/9chenhai_yuntu/js/echarts-block5.js

function loadBlock5() {
    const block5 = echarts.init(document.getElementById("block5"), "macarons");

    let color = ['#f845f1', '#ad46f3', '#5045f6', '#4777f5', '#44aff0', '#45dbf7', '#f6d54a', '#f69846', '#ff4343', '#f845f1'];
    $.ajax({
        url: ajaxBaseUrl + "data/event-distributed.json",
        dataType: "json"
    }).done(function () {
        $("#block5").addClass("chart-done");
    }).done(function (data) {
        var total = 0;
        for (let i = 0; i < data.length; i++) {
            total += data[i].value;
        }
        let block5Opt = {
            tooltip: {
                trigger: "item",
                formatter: function (params) {
                    var percent = 0;
                    percent = ((params.value / total) * 100).toFixed(0);
                    const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#e6b600;"></span>';
                    if (params.name !== '') {
                        return params.name + "<br />" + marker + "数量：" + params.value + "</br>" + marker + "占比：" + percent + "%";
                    } else {
                        return '';
                    }
                }
            },
            calculable: true,
            series: [{
                type: "pie",
                radius: [8, 90],
                avoidLabelOverlap: false,
                startAngle: 0,
                center: ["50%", "50%"],
                roseType: "area",
                selectedMode: "single",
                label: {
                    normal: {
                        show: true,
                        formatter: "{b}"
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        smooth: false,
                        length: 5,
                        length2: 10
                    },
                    emphasis: {
                        "show": true
                    }
                },
                data: []
            }]
        };

        block5.setOption(block5Opt);

        var seriesData = [];
        for (var i = 0; i < data.length; i++) {
            seriesData.push({
                value: data[i].value,
                name: data[i].name,
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                }
            });
        }
        block5.setOption({
            series: [{
                data: seriesData
            }]
        });
    }).fail(function (jqXHR) {
        console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
    });
}