json格式:

[
    {
        "time":"12:00",
        "num":[
            {
                "a":"10",
                "b":"2",
                "c":"6"
            }
        ]
    },
    {
        "time":"13:00",
        "num":[
            {
                "a":"100",
                "b":"30",
                "c":"250"
            }
        ]
    },
    {
        "time":"14:00",
        "num":[
            {
                "a":"56",
                "b":"30",
                "c":"78"
            }
        ]
    }

]

<div id="main" style="height:500px;width: 100%;"></div>
            <script type="text/javascript">
                var myChart = echarts.init(document.getElementById('main'));
                
                var Xtimes=[];    //实际用来盛放X轴坐标值
                var nums=[];
                 var classA=[];   
                 var classB=[];
                 var classC=[];  
                $.ajax({      //获取假数据
                    async : false,
                    type: "GET",
                    url: "./js/qu.txt",
                    dataType: "json",
                    success: function(data){
                        successdata = data;
                        if (successdata) {
                            for(var i=0;i<successdata.length;i++){       
                                Xtimes.push(successdata[i].time);
                                nums.push(successdata[i].num);
                                 //console.log(nums,"11")
                            }
                            for(var j=0;j<nums.length;j++){       
                                classA.push(nums[j][0].a);
                                classB.push(nums[j][0].b);
                                classC.push(nums[j][0].c);
                                console.log(classA,"44")
                            }
                            
                         }
                    }
                    
                });
                    // 指定图表的配置项和数据
            var option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                        type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                    }
                },
                legend: {
                    data:['一级','二级','三级','总数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : Xtimes
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'一级',
                        type:'bar',
                        stack: '数量',
                        data:classA
                    },
                    {
                        name:'二级',
                        type:'bar',
                        stack: '数量',
                        data:classB
                    },
                    {
                        name:'三级',
                        type:'bar',
                        stack: '数量',
                        data:classC
                    },
                    /* {
                        name:'总数',
                        type:'bar',
                        stack: '数量',
                        data:[7,12,17]
                    } */
                ]
            };

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

posted on 2018-03-13 18:19  happiness木木  阅读(140)  评论(0编辑  收藏  举报