angular.js+echarts

json格式:javascript

[
    {
        "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"
            }
        ]
    }java

]ajax

<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>json

相關文章
相關標籤/搜索
本站公眾號
   歡迎關注本站公眾號,獲取更多信息