Echarts動態獲取數據繪制柱形圖

首先下載並引入echarts.js文件

function Btn_Search_12C() {
        var startDate = $("#startDate").val();
        var endDate = $("#endDate").val();

        if (startDate === "" || endDate === "") {
            alert("期之日止不能為空");
        } else {

            var myChart = echarts.init(document.getElementById('12CzhoubaoMap'));
            // 顯示標題，圖例和空的坐標軸
            myChart.setOption({
                title: {
                    text: '接口報錯前十柱形圖'
                },
                tooltip: {},
                legend: {
                    data: [
                        {name: '請求量'},
                        {name: '錯誤量'}
                    ]
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '請求量',
                    type: 'bar',
                    data: []
                }, {
                    name: '錯誤量',
                    type: 'bar',
                    data: []
                }]
            });
            myChart.showLoading();    //數據加載完之前先顯示一段簡單的loading動畫

            var names = [];    //類別數組（實際用來盛放X軸坐標值）
            var request = [];    //銷量數組（實際用來盛放Y坐標值）
            var error = [];    //銷量數組（實際用來盛放Y坐標值）

            $.ajax({
                method: "post",
                url: "${pageContext.request.contextPath}/_12C/select",
                data: {"startDate": startDate, "endDate": endDate},
                dataType: "json", //指定反饋回來的是json數據
                success: function (data) {


                    var servicename = new Array();
                    var requestcount = new Array();
                    var errorcount = new Array();
                    var i = 0;

                    //取出來反饋的json,循環賦值
                    $.each(data._12cdomain, function (idx, obj) {
                        //servicename[i] = 'FOTON_' + obj.servicename.replace(/[^\d]/g, ''); //將非數字的字母剔除
                        servicename[i] = obj.servicename; //將非數字的字母剔除
                        requestcount[i] = obj.requestcount;
                        errorcount[i] = obj.errorcount;
                        console.log(obj.errorcount);
                        i = i + 1;
                    });

                    for (let i = 0; i < servicename.length; i++) {
                        console.log(servicename[i]);
                        console.log(requestcount[i]);
                        console.log(errorcount[i]);
                    }


                    $("#tbodyrequest").empty()
                    $("#tbodyerror").empty()
                    var s = "";
                    for (var i = 0; i < servicename.length; i++) {
                        s = "<tr><td>" + servicename[i] + "</td><td>" + requestcount[i] + "</td><td>" + errorcount[i] + "</td><td>" + ((errorcount[i] / requestcount[i])*100).toFixed(2)+"%" + "</td></tr>";
                        $("#tbodyrequest").append(s);
                        $("#tbodyerror").append(s);
                    }


                    //請求成功時執行該函數內容，result即為服務器返回的json對象
                    if (data) {
                        for (var i = 0; i < servicename.length; i++) {
                            names.push(servicename[i]);    //挨個取出類別並填入類別數組
                            request.push(requestcount[i]);    //挨個取出銷量並填入銷量數組
                            error.push(errorcount[i]);    //挨個取出銷量並填入銷量數組
                        }
                        myChart.hideLoading();    //隱藏加載動畫
                        myChart.setOption({        //加載數據圖表
                            xAxis: {
                                data: names
                            },
                            series: [{
                                // 根據名字對應到相應的系列
                                name: '請求量',
                                type: 'bar',
                                data: request
                            }, {
                                // 根據名字對應到相應的系列
                                name: '錯誤量',
                                type: 'bar',
                                data: error
                            }]
                        });
                    }
                }
            })
        }

    }
</script>

 

<div style="width: 100%;height: 300px;background: white;margin: 0 auto;padding: 10px;" id="12CzhoubaoMap">
</div>


<div style="width: 100%;height: auto;background: white;margin-top: 10px;padding: 10px;display: flex;flex-direction: row">

    <!--請求前十-->
    <table class="table table-bordered table-hover table-condensed" style="margin-left: 5px;">
        <caption>請求前十</caption>
        <thead>
        <tr>
            <th>服務名</th>
            <th>請求量</th>
            <th>錯誤量</th>
            <th>故障占比</th>
        </tr>
        </thead>
        <tbody id="tbodyrequest">

        </tbody>
    </table>
</div>