zoukankan      html  css  js  c++  java
  • angular.js+echarts

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

  • 相关阅读:
    jtl转化成CSV格式的聚合报告
    JMeter--自动生成测试报告
    centos7中没有安装ifconfig命令的解决方法
    Tomcat 安装
    JDK安装
    iOS学习笔记(九)—— xml数据解析
    Wyn Enterprise用户行为日志分析
    详解Wyn仪表板图表中的趋势线
    报表中的条形码和二维码生成
    Wyn Enterprise连接达梦DM8数据库教程
  • 原文地址:https://www.cnblogs.com/happiness-mumu/p/8559987.html
Copyright © 2011-2022 走看看