echarts动态生成条形图

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<body>
    <div id="chartmain" style="width: 600px; height: 400px;"></div>
</body>
<script type="text/javascript">


    function fuzhi(){
        //X轴的名字
        var name=[];
        //Y轴的年龄值
        var age=[];

        $.ajax({
            contentType : "application/json",
            type : "GET",
            url : "info.html",
            dataType : "json",
            success : function(data) {
                for(var i=0;i<data.length;i++){
                    name[i]=data[i].username;
                }

                for(var i=0;i<data.length;i++){
                    age[i]=data[i].age;
                }


                option = {
                    color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : name,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                            {
                                name:'年龄',
                                type:'bar',
                                barWidth: '60%',
                                data:age
                            }
                       ]

                };
                myChart.setOption(option);
            }
        });



        var myChart = echarts.init(document.getElementById('chartmain'));

    }
    fuzhi();
</script>
</html>
echarts动态生成条形图

猜你喜欢
