eCharts画图

1. 方式1

   if ($('#runExport').length) {
        $.ajax({
        url: '/report/reportInfo/',
        method: 'get',
        }).success(function (data, textStatus, jqXHR) {
            // 每次运行报表
            var ctx = document.getElementById("runExport");
            var ctx1 = document.getElementById("bug_qushi");
            var labels = [];
            var datasetsPass = [];
            var datasetsFaild = [];
            var datasetsSum= [];
            for (var i=0; i<data.length; i++) {
                labels.push(data[i].case_date);
                datasetsPass.push(data[i].case_pass_sum);
                datasetsFaild.push(data[i].case_fail_sum);
                datasetsSum.push(data[i].case_sum);
            }
            var runExport = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '# 总数',
                        backgroundColor: "#6a4a38",
                        data: datasetsSum
                    }, {
                        label: '# 成功',
                        backgroundColor: "#26B99A",
                        data: datasetsPass
                    }, {
                        label: '# 失败',
                        backgroundColor: "#f33333",
                        data: datasetsFaild
                    }]
                },

                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });

        var bug_qushi = new Chart(ctx1, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                // {
                //     label: "pass",
                //     backgroundColor: "rgba(38, 185, 154, 0.31)",
                //     borderColor: "rgba(38, 185, 154, 0.7)",
                //     pointBorderColor: "rgba(38, 185, 154, 0.7)",
                //     pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
                //     pointHoverBackgroundColor: "#fff",
                //     pointHoverBorderColor: "rgba(220,220,220,1)",
                //     pointBorderWidth: 1,
                //     data: datasetsPass
                // },
                    {
                    label: "fail",
                    backgroundColor: "rgba(3, 88, 106, 0.3)",
                    borderColor: "rgba(3, 88, 106, 0.70)",
                    pointBorderColor: "rgba(3, 88, 106, 0.70)",
                    pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
                    pointHoverBackgroundColor: "#fff",
                    pointHoverBorderColor: "rgba(151,187,205,1)",
                    pointBorderWidth: 1,
                    data: datasetsFaild
                }]
            },
        });


        }).error(function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR)
        });


    }

2. 方式2

   if ($('#bug_qushi').length) {

        var ctx = document.getElementById("bug_qushi");
        var bug_qushi = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                    label: "My First dataset",
                    backgroundColor: "rgba(38, 185, 154, 0.31)",
                    borderColor: "rgba(38, 185, 154, 0.7)",
                    pointBorderColor: "rgba(38, 185, 154, 0.7)",
                    pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
                    pointHoverBackgroundColor: "#fff",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointBorderWidth: 1,
                    data: [31, 74, 6, 39, 20, 85, 7]
                }, {
                    label: "My Second dataset",
                    backgroundColor: "rgba(3, 88, 106, 0.3)",
                    borderColor: "rgba(3, 88, 106, 0.70)",
                    pointBorderColor: "rgba(3, 88, 106, 0.70)",
                    pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
                    pointHoverBackgroundColor: "#fff",
                    pointHoverBorderColor: "rgba(151,187,205,1)",
                    pointBorderWidth: 1,
                    data: [82, 23, 66, 9, 99, 4, 2]
                }]
            },
        });

    }