echarts中国ajax

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

2016-11-08  本文已影响65人  6659a0f02826
<!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>
上一篇 下一篇

猜你喜欢

热点阅读