柱状图

<div id="mainchart" style="width: 850px; height: 300px; margin-left:-70px;
margin-top:-30px;"></div>
<div id="top10provin"></div>
<div style=" height:10px;clear:both;"></div> 
<style type="text/css">
    #top10provin {
        width: 750px;
        margin-left: 10px;
    }
    
    #top10provin>ul {
        width: 375px;
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
    }
    
    #top10provin>ul>li {
        width: 350px;
        float: left;
        border-bottom: 1px dashed #ddd;
        height: 38px;
        line-height: 38px;
        font-size: 12px;
    }
    
    #top10provin>ul>li>div {
        float: left;
        width: 33%;
    }
    
    #top10provin>ul>li span {
        color: #FF5A2A;
        font-weight: bold;
        margin-right: 5px;
    }
    
    #top10provin>ul>li span.sort {
        color: #fff;
        padding-right: 8px;
        padding-left: 5px;
        font-weight: normal;
        background-color: #ddd;
    }
    
    #top10provin>ul>li span.sort.last {
        padding-right: 5px;
        margin-left: -3px;
    }
    
    #top10provin>ul>li span.sort.active {
        background-color: #FF6263;
    }
</style>
<script type="text/javascript" src="./../js/jquery.min.js"></script>
<script type="text/javascript" src="./../js/echarts.min.js"></script>
   <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('mainchart'));
        initMyChart(myChart);
jQuery(document).ready(function(){GetData(myChart);});
        //GetData(myChart);

        function initMyChart(myChart) {
            myChart.setOption({
                tooltip: {},
                xAxis: [{
                    data: [],
                    axisLabel: { interval: 0,
                        formatter: function (p) {
                            return p.split('').join("\n");
                        },
			textStyle:{color:'#000'}
                    },
                    axisLine: {
                        lineStyle: {color:'#ddd',width:4}
                    },
                    axisTick: {
                        show: false
                    }

                }],
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show:false
                    },
		    splitLine:{show:false}
                },
                series: [{
                    type: 'bar',
                    barCategoryGap: '40%',
                    data: [],
                    markPoint: { data: [{ type: 'max', name: '最大值'}] },
                    itemStyle: {
                        normal: {
                            color:"#ff7171",
                            barBorderRadius:[10,10,0,0]
                        },
                        emphasis: {
                            color:"#ff4242" 		
                        }
                    }
                }]
            });
        }


        function GetData(myChart) {
            jQuery.ajax({
                type: "post",
                dataType: 'json',
                url: "./../ajax.ashx",
                data: "op=forEchart",
                success: function (jsonData) {
                    var xdata = new Array();
                    var ydata = new Array();
                    jQuery.each(eval("("+jsonData.data0+")"), function (i, item) {
                        xdata.push(item.Name);
                        ydata.push(item.num);
                    });
                    myChart.setOption({
                        xAxis: {
                            data: xdata
                        },
                        series: {
                            data: ydata
                        }
                    });
                    var htmll = "<ul>";
                    var htmlr = "<ul>";
                    jQuery.each(eval("("+jsonData.data1+")"), function (i, item) {
                        var temp = "<li><div><span class='sort'>";
                        if (i == 9) temp = "<li><div><span class='sort last'>";
                        if (i < 3) temp = "<li><div><span class='sort active'>";
                        temp += (i + 1) + "</span>" + item.Name + "省</div><div><span>" + item.teacher + "</span>教师</div>";
                        temp += "<div><span>" + item.student + "</span>学生</div></li>";
                        if (i < 5) htmll += temp;
                        else htmlr += temp;
                    });
                    htmll += "</ul>";
                    htmlr += "</ul>";
                    jQuery("#top10provin").html(htmll + htmlr);
                }
            });
        }
    </script>

protected void ForEchart()
{
   //var obj=DataTableToJson(dt);
   Response.Write(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(obj));
   Response.End();
}

注：柱状图要引用的js_http://download.youkuaiyun.com/download/qq_27421041/9816607