angular.js+echarts

ECharts图表配置示例

最新推荐文章于 2025-09-10 20:18:23 发布

weixin_30566111

最新推荐文章于 2025-09-10 20:18:23 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/happiness-mumu/p/8559987.html

本文介绍了一个使用ECharts库创建动态柱状图的具体实例。该示例通过Ajax请求获取了不同时间点的数据，并将其展示在图表上。图表展示了三个类别（一级、二级、三级）在12:00、13:00和14:00这三个时间点的数量变化。

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>