DK-MES-2.0
/
HEGII.ss.mes.dashboard


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
							<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="/img/logo.png" />
    <link rel="bookmark" href="/img/logo.png" />
    <link rel="stylesheet" href="/plugins/bootstrap-4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="/Plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="DashBoard.css?v3" />
    <script src="/Plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/Plugins/xrequest/xrequest.min.js"></script>
    <title>东科软件</title>
</head>
<body>
    <!--宣传视频-->
    <script src="/main/Common/video.js"></script>

    <!--导航菜单-->
    <script src="/main/common/navbar.js"></script>

    <!--统计-->
    <div class="container-fluid">

        <!--页头-->
        <div class="row">
            <div class="col-4 d-inline-flex align-items-center justify-content-start">
                <img class="pl-3" src="/Img/hegii_logo_white.png" style="height: 26px;" />
                <span class="pl-3" id="报表加载"></span>
            </div>
            <div class="col-4 d-inline-flex align-items-center justify-content-center">
                <h3 class="text-center"><span style="font-weight:600;font-size:36px;">半检一检</span></h3>
            </div>
            <div class="col-4 d-inline-flex align-items-center justify-content-end">
                <span id="当前时间"></span>
                <a class="pl-2" href="javascript:void(0)" onclick="fullScreen(); $('#navbar').toggle();">
                    <!--<img class="pr-3" src="/Img/dongke_logo_white.png" style="height: 40px;" />-->
                </a>
            </div>
        </div>

        <!--行1-->
        <div class="row pt-0">
            <div class="col-12 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:250px">
                    <!--每小时产量达成-->
                    <div class="d-flex justify-content-center">
                        <canvas id="canvasHourCL" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:230px;width:100%"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!--行2-->
        <div class="row pt-0">
            <div class="col-12 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:250px">
                    <!--每小时UPPH达成-->
                    <div class="d-flex justify-content-center">
                        <canvas id="canvasHourUPPH" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:230px;width:100%"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!--行3-->
        <div class="row pt-0">
            <div class="col-12 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:250px">
                    <!--每日计划达成-->
                    <div class="d-flex justify-content-center">
                        <canvas id="canvasDayCL" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:230px;width:100%"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!--行4-->
        <div class="row pt-0">
            <div class="col-5 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:250px">
                    <!--日产量PK-->
                    <div class="d-flex justify-content-center">
                        <canvas id="canvasDayCLPK" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:230px;width:100%"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-5 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:250px">
                    <!--月产量PK-->
                    <div class="d-flex justify-content-center">
                        <canvas id="canvasMonthCLPK" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:230px;width:100%"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-2 pt-0">
                <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:250px">
                    <!--月产量达成-->
                    <div class="">

                        <div class="text-center" style="font-size:16px;">
                            <b>每月产量达成</b>
                        </div>
                        <div>
                            <div class="circleChart" id="circleMonth" data-value="0"></div>
                        </div>
                        <div>
                            <div class="d-flex pull-left"><span style="color:#2f8edb">标准</span> &nbsp;<span id="circleBZ" class="text-white">0</span></div>
                            <div class="d-flex pull-right"><span style="color:#2f8edb">实际</span> &nbsp;<span id="circleSJ" class="text-white">0</span></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!--<div style="height:26px;"></div>-->
    </div>

    <!--版权信息-->
    <!--<script src="../common/footer.js"></script>-->

    <script src="/Plugins/bootstrap-4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="/Plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/Plugins/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
    <script src="/Plugins/sweetalert/sweetalert.min.js"></script>
    <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
    <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
    <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
    <script src="/Plugins/circleChart/circleChart.min.js"></script>

    <script>
        //缺陷统计刷新时间
        var refreshTime1 = 600000;
        var currentTime1 = 0;

        var doGetData;
        var doGetTime;

        var frameHeight;
        var tableHeight;
        var offsetHeight = 20;

        $(document).ready(function () {
            //设置缩放
            //xuwell.setScale(1);

            //初始化
            init();

            //首次加载
            //loadData();

            //定时刷新数据
            doGetData = setInterval(function () { timeUpdate(); }, 1000);

            //刷新时间
            loadServerTime();
            doGetTime = setInterval(function () { loadServerTime(); }, 150000);

        });

        //取服务器时间
        function loadServerTime() {
            $.get('../api/GetDateTime.ashx', function (data) {
                var json = JSON.parse(data);
                if (json["success"] == true) {
                    $('#当前时间').html(json["rows"]["时间"]);
                }
            });
        }

        function timeUpdate() {

            if (currentTime1 <= 0) {
                loadData();
                currentTime1 = refreshTime1;
            }
            else {
                if (currentTime1 > 0) {
                    $('#报表加载').html('刷新：' + currentTime1 / 1000 + ' 秒');
                    currentTime1 = currentTime1 - 1000;
                }
            }
        }

        function loadData(callback) {

            //正式数据===========================================================
            var hourCount = $.ajax({ url: "hourCount.ashx", dataType: "json", type: "get" });
            var dayCount = $.ajax({ url: "dayCount.ashx", dataType: "json", type: "get" });
            var dayPk = $.ajax({ url: "dayPk.ashx", dataType: "json", type: "get" });
            var monthPk = $.ajax({ url: "monthPk.ashx", dataType: "json", type: "get" });
            var monthCount = $.ajax({ url: "monthCount.ashx", dataType: "json", type: "get" });

            $.when(hourCount, dayCount, dayPk, monthPk, monthCount).then(
                function (resultHourCount, resultDayCount, resultDayPk, resultMontyPk, resultMonthCount) {

                    //加载每小时产量和UPPH
                    var jsonHourCount = resultHourCount[0];
                    if (jsonHourCount["success"] == true) {
                        window.HourCL.data.labels = [];
                        window.HourCL.data.datasets[0].data = [];
                        window.HourCL.data.datasets[1].data = [];
                        window.HourUPPH.data.labels = [];
                        window.HourUPPH.data.datasets[0].data = [];
                        window.HourUPPH.data.datasets[1].data = [];
                        for (var i = 0; i < jsonHourCount["rows"].length; i++) {
                            window.HourCL.data.labels.push(jsonHourCount["rows"][i]["项目"]);
                            window.HourCL.data.datasets[0].data.push(jsonHourCount["rows"][i]["目标产量"]);
                            window.HourCL.data.datasets[1].data.push(jsonHourCount["rows"][i]["实际产量"]);
                            window.HourUPPH.data.labels.push(jsonHourCount["rows"][i]["项目"]);
                            window.HourUPPH.data.datasets[0].data.push(jsonHourCount["rows"][i]["目标UPPH"]);
                            window.HourUPPH.data.datasets[1].data.push(jsonHourCount["rows"][i]["实际UPPH"]);
                        }

                        //2021-11-08 xuwei add 用服务器时间判断，清空0数据点
                        $.get('../api/GetDateTime.ashx', function (data) {
                            var json = JSON.parse(data);
                            if (json["success"] == true) {
                                var myDate = new Date(json["rows"]["date"]);
                                for (var j = myDate.getHours() + 1; j < 24; j++) {
                                    //window.HourCL.data.datasets[0].data[j] = null;
                                    window.HourCL.data.datasets[1].data[j] = null;
                                    //window.HourUPPH.data.datasets[0].data[j] = null;
                                    window.HourUPPH.data.datasets[1].data[j] = null;
                                }
                                window.HourCL.data.datasets[0].data[1] = 0;
                                window.HourCL.data.datasets[0].data[2] = 0;
                                window.HourCL.data.datasets[0].data[3] = 0;
                                window.HourCL.data.datasets[0].data[4] = 0;
                                window.HourCL.data.datasets[0].data[5] = 0;
                                window.HourCL.data.datasets[0].data[6] = 0;
                                window.HourUPPH.data.datasets[0].data[1] = 0;
                                window.HourUPPH.data.datasets[0].data[2] = 0;
                                window.HourUPPH.data.datasets[0].data[3] = 0;
                                window.HourUPPH.data.datasets[0].data[4] = 0;
                                window.HourUPPH.data.datasets[0].data[5] = 0;
                                window.HourUPPH.data.datasets[0].data[6] = 0;
                                window.HourCL.update();
                                window.HourUPPH.update();
                            }
                        });
                        //====================================
                        window.HourCL.update();
                        window.HourUPPH.update();

                    }

                    //加载每日产量
                    var jsonDayCount = resultDayCount[0];
                    if (jsonDayCount["success"] == true) {
                        window.DayCL.data.labels = [];
                        window.DayCL.data.datasets[0].data = [];
                        window.DayCL.data.datasets[1].data = [];
                        for (var i = 0; i < jsonDayCount["rows"].length; i++) {
                            window.DayCL.data.labels.push(jsonDayCount["rows"][i]["时间"]);
                            window.DayCL.data.datasets[0].data.push(jsonDayCount["rows"][i]["目标产量"]);
                            //window.DayCL.data.datasets[0].data.push(1800);
                            window.DayCL.data.datasets[1].data.push(jsonDayCount["rows"][i]["实际产量"]);
                        }
                        //2021-11-08 xuwei add 用服务器时间判断，清空0数据点
                        $.get('../api/GetDateTime.ashx', function (data) {
                            var json = JSON.parse(data);
                            if (json["success"] == true) {
                                var myDate = new Date(json["rows"]["date"]);
                                for (var j = myDate.getDate(); j < 31; j++) {
                                    //window.DayCL.data.datasets[0].data[j] = null;
                                    window.DayCL.data.datasets[1].data[j] = null;
                                    //window.DayCL.data.datasets[2].data[j] = null;
                                    //window.DayCL.data.datasets[3].data[j] = null;
                                }
                                window.DayCL.update();
                            }
                        });
                        //====================================
                        window.DayCL.update();
                    }

                    //加载每日产量PK
                    var jsonDayPk = resultDayPk[0];
                    if (jsonDayPk["success"] == true) {
                        window.DayCLPK.data.labels = [];
                        window.DayCLPK.data.datasets[0].data = [];
                        window.DayCLPK.data.datasets[1].data = [];
                        for (var i = 0; i < jsonDayPk["rows"].length; i++) {
                            window.DayCLPK.data.labels.push(jsonDayPk["rows"][i]["工号"]);
                            window.DayCLPK.data.datasets[0].data.push(jsonDayPk["rows"][i]["目标产量"]);
                            window.DayCLPK.data.datasets[1].data.push(jsonDayPk["rows"][i]["实际产量"]);
                        }
                        window.DayCLPK.update();
                    }

                    //加载每月产量PK
                    var jsonMonthPk = resultMontyPk[0];
                    if (jsonMonthPk["success"] == true) {
                        window.MonthCLPK.data.labels = [];
                        window.MonthCLPK.data.datasets[0].data = [];
                        window.MonthCLPK.data.datasets[1].data = [];
                        for (var i = 0; i < jsonMonthPk["rows"].length; i++) {
                            window.MonthCLPK.data.labels.push(jsonMonthPk["rows"][i]["工号"]);
                            window.MonthCLPK.data.datasets[0].data.push(jsonMonthPk["rows"][i]["目标产量"]);
                            window.MonthCLPK.data.datasets[1].data.push(jsonMonthPk["rows"][i]["实际产量"]);
                        }
                        window.MonthCLPK.update();
                    }

                    //加载月产量达成
                    var jsonMonthCount = resultMonthCount[0];
                    //loadCircleChart("#circleMonth", 0, color(window.chartColors.blue).alpha(0.6).rgbString());
                    if (jsonMonthCount["success"] == true) {
                        loadCircleChart("#circleMonth", Math.round(jsonMonthCount["rows"][0]["实际产量"] / jsonMonthCount["rows"][0]["目标产量"] * 100), color(window.chartColors.blue).alpha(0.6).rgbString());
                        $("#circleBZ").text(jsonMonthCount["rows"][0]["目标产量"]);
                        $("#circleSJ").text(jsonMonthCount["rows"][0]["实际产量"]);
                    }

                    if (typeof callback != 'undefined') callback();
                }
            );

            //===================================================================
        }

        function loadTable(id, url, callback) {

        }

        //日期格式化
        function groutingDate(value, row, index) {
            var d = new Date(value);
            return d.getFullYear() + '-' + d.getMonth() + '-' + d.getDay();
        }

        function dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
        }

    </script>

    <script>

        window.chartColors = {
            red: 'rgb(255, 99, 132)',
            orange: 'rgb(255, 159, 64)',
            yellow: 'rgb(255, 250, 86)',
            green: 'rgb(75, 192, 192)',
            blue: 'rgb(54, 162, 250)',
            purple: 'rgb(153, 102, 255)',
            grey: 'rgb(231,233,237)'
        };

        var color = Chart.helpers.color;

        window.randomScalingFactor = function (num) {
            return Math.round(Math.random() * num);
        }

        function init() {

            Chart.defaults.global.defaultFontColor = 'white';
            Chart.defaults.global.defaultFontSize = 16;

            //每小时产量=========================================
            window.configHourCL = {
                data: {
                    labels: [],
                    datasets: [{
                        label: "标准产能",
                        backgroundColor: color(window.chartColors.red).alpha(0.6).rgbString(),
                        borderColor: window.chartColors.red,
                        borderWidth: 2,
                        pointRadius: 12,
                        data: [],
                        fill: false,
                    }, {
                        label: "实际产量",
                        fill: false,
                        backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
                        borderColor: window.chartColors.blue,
                        borderWidth: 2,
                        pointRadius: 12,
                        data: []
                    }]
                },
                type: 'line',
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: '每小时产量达成'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: false,
                                labelString: ''
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: false,
                                labelString: 'Value'
                            }
                        }]
                    }
                }
            };
            var ctxHourCL = document.getElementById("canvasHourCL").getContext("2d");
            window.HourCL = new Chart(ctxHourCL, configHourCL);
            //===================================================

            //每小时UPPH=========================================
            window.configHourUPPH = {
                data: {
                    labels: [],
                    datasets: [{
                        label: "标准UPPH",
                        backgroundColor: color(window.chartColors.red).alpha(0.6).rgbString(),
                        borderColor: window.chartColors.red,
                        borderWidth: 2,
                        pointRadius: 12,
                        data: [],
                        fill: false,
                    }, {
                        label: "实际UPPH",
                        fill: false,
                        backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
                        borderColor: window.chartColors.blue,
                        borderWidth: 2,
                        pointRadius: 12,
                        data: []
                    }]
                },
                type: 'line',
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: '每小时UPPH达成'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: false,
                                labelString: ''
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: false,
                                labelString: 'Value'
                            }
                        }]
                    }
                }
            };
            var ctxHourUPPH = document.getElementById("canvasHourUPPH").getContext("2d");
            window.HourUPPH = new Chart(ctxHourUPPH, configHourUPPH);
            //===================================================

            //每日计划达成=======================================
            window.configDayCL = {
                data: {
                    labels: [],
                    datasets: [{
                        type: 'line',
                        label: '计划产量',
                        backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                        fill: false,
                        borderColor: window.chartColors.red,
                        borderWidth: 2,
                        pointRadius: 12,
                        data: []
                    }, {
                        label: '实际产量',
                        backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                        borderColor: window.chartColors.blue,
                        borderWidth: 1,
                        data: []
                    }]
                },
                type: 'bar',
                options: {
                    legend: {
                        display: true
                    },
                    title: {
                        display: true,
                        text: "每日产量达成"
                    },
                    tooltips: {
                        mode: 'point',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: false
                        }],
                        yAxes: [{
                            display: true,
                            stacked: false,
                            ticks: {
                                min: 0,
                                stepSize: 600,
                                max: 3000
                            }
                        }]
                    }

                }
            };
            var ctxDayCL = document.getElementById("canvasDayCL").getContext("2d");
            window.DayCL = new Chart(ctxDayCL, configDayCL);
            //===================================================

            //日PK===============================================
            window.configDayCLPK = {
                data: {
                    labels: [],
                    datasets: [{
                        type: 'line',
                        label: '标准产能',
                        backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                        fill: false,
                        borderColor: window.chartColors.red,
                        borderWidth: 2,
                        pointRadius: 12,
                        data: []
                    }, {
                        label: '实际产量',
                        backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                        borderColor: window.chartColors.blue,
                        borderWidth: 1,
                        data: []
                    }]
                },
                type: 'bar',
                options: {
                    legend: {
                        display: true
                    },
                    title: {
                        display: true,
                        text: "每日产量PK"
                    },
                    tooltips: {
                        mode: 'point',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: false
                        }],
                        yAxes: [{
                            display: true,
                            stacked: false,
                            ticks: {
                                min: 0,
                                stepSize: 400,
                                max: 1200
                            }
                        }]
                    }

                }
            };
            var ctxDayCLPK = document.getElementById("canvasDayCLPK").getContext("2d");
            window.DayCLPK = new Chart(ctxDayCLPK, configDayCLPK);
            //===================================================

            //月PK===============================================
            window.configMonthCLPK = {
                data: {
                    labels: [],
                    datasets: [{
                        type: 'line',
                        label: '标准产能',
                        backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                        fill: false,
                        borderColor: window.chartColors.red,
                        borderWidth: 2,
                        pointRadius: 12,
                        data: []
                    }, {
                        label: '实际产量',
                        backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                        borderColor: window.chartColors.blue,
                        borderWidth: 1,
                        data: []
                    }]
                },
                type: 'bar',
                options: {
                    legend: {
                        display: true
                    },
                    title: {
                        display: true,
                        text: "每月产量PK"
                    },
                    tooltips: {
                        mode: 'point',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: false
                        }],
                        yAxes: [{
                            display: true,
                            stacked: false,
                            ticks: {
                                min: 0,
                                //stepSize: 2,
                                max: 40000
                            }
                        }]
                    }

                }
            };
            var ctxMonthCLPK = document.getElementById("canvasMonthCLPK").getContext("2d");
            window.MonthCLPK = new Chart(ctxMonthCLPK, configMonthCLPK);
            //===================================================
        };


        function loadCircleChart(id, value, bgcolor) {
            $(id).circleChart({
                //color: "#E48516",
                color: bgcolor,
                startAngle: 40,
                text: true,
                animation: "easeInOutCubic",
                backgroundColor: "#384E78", // 进度条之外颜色
                background: true, // 是否显示进度条之外颜色
                speed: 1000, // 出现的时间
                widthRatio: 0.4, // 进度条宽度
                value: value,  // 进度条占比
                unit: "percent",
                counterclockwise: false, // 进度条反方向
                size: 160, // 圆形大小
                animate: true, // 进度条动画
                backgroundFix: true,
                lineCap: "round",
                redraw: false,
                cAngle: 0,
                textCenter: true,
                textSize: false,
                textWeight: "normal",
                textFamily: "sans-serif",
                relativeTextSize: 1 / 7, // 进度条中字体占比
                autoCss: true,
                onDraw: function (el, circle) {
                    circle.text(Math.round(circle.value) + "%"); // 根据value修改text
                }
            });
        }

    </script>

</body>
</html>