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>