.ajax()请求并处理数据,然后注入echart表格[for循环]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo1</title>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>

    <script src="jquery-3.1.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript">
        var url = '这里输入请求的网址链接';
        var year = [],temp = [];
        console.log("aa");
        var demoData = $.ajax({
            type: 'get',
            url : url
        })
        console.log("AA");
        $.when(demoData).done(function(a) {
                for (var i = 0; i < a.data.length; i++) {
                var x = a.data[i].date[0];
                var y = a.data[i].value[0];

                console.log(x);
                console.log(y);
                year.push(x);
                temp.push(y);

                var myChart = echarts.init(document.getElementById('main'));
                        option = {
                            title: {
                                    text: '统计'
                            },
                            tooltip: {
                                    trigger: 'axis'
                            },
                            legend: {
                                    data:['统计']
                            },
                            grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                            },
                            toolbox: {
                                    feature: {
                                            saveAsImage: {}
                                    }
                            },
                            xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: year
                            },
                            yAxis: {
                                    type: 'value'
                            },
                            series: [
                            {
                                    name:'统计',
                                    type:'line',
                                    stack: '总量',
                                    data:temp
                            }
                    ]
                };
                myChart.setOption(option);

            }
    })
    </script>
    </body>
</html>

我知道这里出问题了,不知道怎么改

for (var i = 0; i < a.data.length; i++) { 
var x = a.data[i].date[0]; 
var y = a.data[i].value[0];
year.push(x);
temp.push(y);

2016.11.7
*-------------------------------------------------------------------
2016.11.8

今天改了下,发现正确了,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo1</title>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>

    <script src="jquery-3.1.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript">
        var url = 'https://raw.githubusercontent.com/chunyuezhang/aa/master/data.json';
        var year = [],temp = [];
        var demoData = $.ajax({
            type: 'get',
            url : url
        })

        $.when(demoData).done(function(a) {
                for (var i = 0; i < a.data.length; i++) {
                var x = a.data[i].date;
                var y = a.data[i].value;
                console.log(x);
                console.log(y);
                year.push(x.slice(0,4)-0);
                temp.push(y);

                var myChart = echarts.init(document.getElementById('main'));
                        option = {
                            title: {
                                    text: '统计'
                            },
                            tooltip: {
                                    trigger: 'axis'
                            },
                            legend: {
                                    data:['统计']
                            },
                            grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                            },
                            toolbox: {
                                    feature: {
                                            saveAsImage: {}
                                    }
                            },
                            xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: year
                            },
                            yAxis: {
                                    type: 'value'
                            },
                            series: [
                            {
                                    name:'统计',
                                    type:'line',
                                    stack: '总量',
                                    data:temp
                            }
                    ]
                };
                myChart.setOption(option);

            }
    })
    </script>
    </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 曾经有一份美好的爱情放在我的面前我没有珍惜。等到失去后才后悔莫及。如果可以再对小李说。毛欣想说。这辈子无缘再牵手。...
    毛欣与小李阅读 2,661评论 0 13
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,445评论 25 708
  • 文/辞不尽意 关于“亲爱的” 曾经有一段时间,我特别喜欢“亲爱的”这三个字,觉得它是世界上最美的情话。那是爱你的人...
    辞不尽意阅读 400评论 0 2
  • 爱情从来是两个人的事,如果全靠你一个人在维持,那么那就不是爱情,而是养大爷。同样的,生活中其他关系也是这样,一旦一...
    瑟瑟起舞阅读 2,389评论 0 1