Echarts 柱状图使用

下载http://echarts.baidu.com/download.html

引用js

        <script src="~/lib/echarts/echarts.min.js"></script>
        <script src="~/lib/jquery/dist/jquery.js"></script>

前端页面加入柱状图显示div

<div class="row">
    <div class="col-md-12">
        <div id="main" style="width: 90%;height:800px;"></div>
    </div>

</div>

初始化echarts

$(function () {
        var myChart = echarts.init(document.getElementById('main'));//初始化echarte
        var objX1 = [];
        var obj2 = [];
        var objY = [];
        var objType = [];
        $.ajax({
            //提交数据的类型 POST GET
            type: "POST",
            //提交的网址
            url: '@Url.Action("GetEchartsDemoData")',
            //提交的数据
            //data: {},
            //使用同步的方式,true为异步方式 默认true
            async: false,
            //返回数据的格式
            datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
            //在请求之前调用的函数
            beforeSend: function () {
                //$("#msg").html("logining");
            },
            //成功返回之后调用的函数             
            success: function (rel) {
                for (var i = 0; i < rel.data.length; i++) {
                    var data = rel.data[i];
                    objY.push(data.y);
                    objX1.push(data.x1);
                    objX2.push(data.x2);
                }
                initEcharts(objY, objX1, objX2);
            },
            //调用执行后调用的函数
            complete: function (XMLHttpRequest, textStatus) {
                //alert(XMLHttpRequest.responseText);
                //alert(textStatus);
                //HideLoading();
            },
            //调用出错执行的函数
            error: function () {
                //请求出错处理
            }
        });

        function initEcharts(objYArr, objX1, objX2) {
            option = {
                title: {
                    text: '标题',
                    subtext: '单位：人'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['2011年', '2012年']
                },
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    name: '万元',
                    type: 'value',
                    boundaryGap: [0, 0],
                    axisLabel: {
                        interval: 0,//0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）
                        rotate: -90,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
                        //fromatter: '{value} %'
                        
                    },
                    //nameLocation: 'middle',
                    //nameTextStyle: {
                    //    color: "red",
                    //    fontSize: 16,
                    //    padding: 10
                    //}
                },
                yAxis: {
                    type: 'category',
                    data: objYArr//['a', 'b, 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v']
                },
                series: [
                    {
                        name: '2011年',
                        type: 'bar',
                        data: objX1//[18203, 23489, 29034, 104970, 131744, 630230, 23489, 29034, 104970, 131744, 630230, 23489, 29034, 104970, 131744, 630230, 23489, 29034, 104970, 131744, 104970, 23489],
                        //type: 'line'
                    },
                    {
                        name: '2012年',
                        type: 'bar',
                        data: objX2//[19325, 23438, 31000, 121594, 134141, 681807, 23438, 31000, 121594, 23438, 31000, 121594, 23438, 31000, 121594, 23438, 31000, 121594, 23438, 31000, 121594, 23438]
                    }
                ]
                ,
                //dataZoom:{
                // realtime:true, //拖动滚动条时是否动态的更新图表数据
                // height:25,//滚动条高度
                // start:1,//滚动条开始位置（共100等份）
                //end:100//结束位置（共100等份）
                //}
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

后端代码

[HttpPost]
    public IActionResult GetEchartsDemoData()
    {// , , , , , , , , , , 104970, , , , , , 131744, , 23489
        var vm = new List<XYVM>();
        vm.Add(new XYVM { Y = "a", X1 = 18203, X2 = 29034 });
        vm.Add(new XYVM { Y = "b", X1 = 23489, X2 = 630230 });
        vm.Add(new XYVM { Y = "c", X1 = 29034, X2 = 104970 });
        vm.Add(new XYVM { Y = "d", X1 = 104970, X2 = 23489 });
        vm.Add(new XYVM { Y = "e", X1 = 131744, X2 = 29034 });
        vm.Add(new XYVM { Y = "f", X1 = 630230, X2 = 131744 });
        vm.Add(new XYVM { Y = "g", X1 = 23489, X2 = 630230 });
        vm.Add(new XYVM { Y = "h", X1 = 29034, X2 = 104970 });
        vm.Add(new XYVM { Y = "i", X1 = 104970, X2 = 131744 });
        vm.Add(new XYVM { Y = "j", X1 = 131744, X2 = 630230 });
        vm.Add(new XYVM { Y = "k", X1 = 23489, X2 = 29034 });
        vm.Add(new XYVM { Y = "l", X1 = 630230, X2 = 23489 });
        vm.Add(new XYVM { Y = "m", X1 = 104970, X2 = 104970 });
        vm.Add(new XYVM { Y = "n", X1 = 23489, X2 = 630230 });
        vm.Add(new XYVM { Y = "o", X1 = 104970, X2 = 29034 });
        vm.Add(new XYVM { Y = "p", X1 = 131744, X2 = 23489 });
        vm.Add(new XYVM { Y = "q", X1 = 630230, X2 = 131744 });
        vm.Add(new XYVM { Y = "r", X1 = 104970, X2 = 29034 });
        vm.Add(new XYVM { Y = "d", X1 = 131744, X2 = 23489 });
        vm.Add(new XYVM { Y = "t", X1 = 23489, X2 = 104970 });
        vm.Add(new XYVM { Y = "u", X1 = 104970, X2 = 630230 });
        vm.Add(new XYVM { Y = "v", X1 = 104970, X2 = 29034 });
        return Json(new { msg = "", data = vm });
    }