var code = "";
var resultData = null;

window.onload = function () {
    var ChartName = decodeURI(getUrlParam("urlName"));
    GetData(ChartName);
    btnClick();
   
}

function GetData(ChartName) {
    var dataY1 = [];
    var dataY2 = [];
    $.ajax({
        url: "../../../Ashx/DataDZZH.ashx",
        type: "post",
        data: { Action: "GetQSSRR"},
        dataType: "json",
        async: false,
        success: function (result) {
            var dataX = [];
            var dataY = [];
            var html = "";
            
            $.each(result, function (index, value) {
                html += "<tr><td>"+value.Type+"</td><td>"+value.Count+"</td></tr>";
                dataX.push(value.Type);
                dataY.push(value.Count);

            });
           
            InitChart(ChartName,dataX, dataY);
            $("#dataTable").empty();
            $("#dataTable").append("<table><tr><td>类型</td><td>数量</td></tr>" + html + "</table>");
        }
    });
}

var myChart = null;
function InitChart(ChartName, dataX, dataY) {
    var dom = document.getElementById("container");
    myChart = echarts.init(dom);
    option = {
        //title: {
        //    text: ChartName,
        //    x: 'center',
        //    y: 'top',

        //    textStyle: {
        //        color: '#ffffff',
        //        fontSize: 15
        //    }
        //},
        grid:{
            top: '5%',
            left:"20%",
            bottom:'10%'
        },
        tooltip: {
            trigger: 'item',
            confine: 'hidden',
            formatter: '{b} : {c}'
        },
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                }
            },
            data: dataX
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                }
            },
            splitLine: {
                show: false
            }
        },
        series: [{
            data: dataY,
            type: 'bar',
            barMaxWidth: 20,
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    };
}


function btnClick() {
    $(".chartBtn").click(function () {
        $("#container").css("display", "block");
        $("#dataTable").css("display", "none");
        $(".dataBtn").css("background-color", "#000000");
        $(".chartBtn").css("background-color", "#033D73");
    });

    $(".dataBtn").click(function () {
        $("#container").css("display", "none");
        $("#dataTable").css("display", "block");
        $(".dataBtn").css("background-color", "#033D73");
        $(".chartBtn").css("background-color", "#000000");
    });
}