qq_22701921
指尖1993
2018-08-07 06:21
采纳率: 46.7%
浏览 2.6k

echarts 显示数据出现问题,json取出数据后无法显示

如图,想显示的数据如图:
图片说明

这数据是直接写死的,代码如下:

 <body>
    <div id="line" style="width:600px; height: 400px;float:right"></div>
</body>


<script type="text/javascript">
    $(function() {
        loaderBar();
    });

    function loaderBar() {

        var myChart = echarts.init(document.getElementById('line'));

        var dataAll = [ 389, 259, 262, 324, 232, 176, 196, 214, 133, 370 ];

        var yAxisData = [ '原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7',
                                '原因8', '原因9', '原因10' ];

        var option = {
            backgroundColor : '#0f375f',
            title : [ {
                text : "投诉原因TOP10",
                x : '10%',
                y : '1%',
                textStyle : {
                    color : "#fff",
                    fontSize : "14"
                }
            }, ],
            grid : [ {
                x : '20%',
                y : '7%',
                width : '45%',
                height : '90%'
            }, ],
            tooltip : {
                formatter : '{b} ({c})'
            },
            xAxis : [ {
                gridIndex : 0,
                axisTick : {
                    show : false
                },
                axisLabel : {
                    show : false
                },
                splitLine : {
                    show : false
                },
                axisLine : {
                    show : false
                }
            }, ],
            yAxis : [ {
                gridIndex : 0,
                interval : 0,
                data : yAxisData.reverse(),
                axisTick : {
                    show : false
                },
                axisLabel : {
                    show : true
                },
                splitLine : {
                    show : false
                },
                axisLine : {
                    show : false,
                    lineStyle : {
                        color : "white"
                    }
                },
            } ],
            series : [ {
                name : '投诉原因TOP10',
                type : 'bar',
                xAxisIndex : 0,
                yAxisIndex : 0,
                barWidth : '45%',
                itemStyle : {
                    normal : {
                        color : 'blue'
                    }
                },
                label : {
                    normal : {
                        show : true,
                        position : "right",
                        textStyle : {
                            color : "white"
                        }
                    }
                },
            data : dataAll.sort(),
            },

            ]
        };
        myChart.setOption(option); 

</script>

但是我把它动态用ajax调用的时候,就无法显示数据了,代码如下:

<body>
    <div id="line" style="width:600px; height: 400px;float:right"></div>
</body>


<script type="text/javascript">
    $(function() {
        loaderBar();
    });


    function loaderBar() {

        var myChart = echarts.init(document.getElementById('line'));

        var dataAll = [/* 389, 259, 262, 324, 232, 176, 196, 214, 133, 370 */];

        var yAxisData = [/*  '原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7',
                        '原因8', '原因9', '原因10'  */];

    var option = {
            backgroundColor : '#0f375f',
            title : [ {
                text : "投诉原因TOP10",
                x : '10%',
                y : '1%',
                textStyle : {
                    color : "#fff",
                    fontSize : "14"
                }
            }, ],
            grid : [ {
                x : '20%',
                y : '7%',
                width : '45%',
                height : '90%'
            }, ],
            tooltip : {
                formatter : '{b} ({c})'
            },
            xAxis : [ {
                gridIndex : 0,
                axisTick : {
                    show : false
                },
                axisLabel : {
                    show : false
                },
                splitLine : {
                    show : false
                },
                axisLine : {
                    show : false
                }
            }, ],
            yAxis : [ {
                gridIndex : 0,
                interval : 0,
                /* data : yAxisData.reverse(), */
                axisTick : {
                    show : false
                },
                axisLabel : {
                    show : true
                },
                splitLine : {
                    show : false
                },
                axisLine : {
                    show : false,
                    lineStyle : {
                        color : "white"
                    }
                },
            } ],
            series : [ {
                name : '投诉原因TOP10',
                type : 'bar',
                xAxisIndex : 0,
                yAxisIndex : 0,
                barWidth : '45%',
                itemStyle : {
                    normal : {
                        color : 'blue'
                    }
                },
                label : {
                    normal : {
                        show : true,
                        position : "right",
                        textStyle : {
                            color : "white"
                        }
                    }
                },
                /* data : dataAll.sort(), */
            },

            ]
        };
        /* myChart.setOption(option); */

        var dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];

        var yAxisData = ['原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7',
                        '原因8', '原因9', '原因10'];

        $.ajax({

            type : 'get',
            url : 'json/indexdata.json',//请求数据的地址
            dataType : "json", //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容,result即为服务器返回的json对象
                $.each(result.rankList, function(index, item) {
                    yAxisData.push(item.name); //挨个取出类别并填入类别数组                    
                    dataAll.push(item.count); //挨个取出销量并填入销量数组
                }); 
                myChart.hideLoading();  
                /* alert(yAxisData);
                alert(dataAll);
                return ;  */
                option.yAxis.data=yAxisData;
                option.series.data=dataAll;
                myChart.setOption(option);  

            }

        });



    }
</script>

数据是能够拿到,但是现在图表无法显示出来。
图片说明

哪位大佬帮忙看看,感谢呀,江湖救急!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

7条回答 默认 最新

  • qq_29777207
    张音乐 2018-08-07 07:33
    已采纳
     <script type="text/javascript">
        $(function() {
            loaderBar();
        });
    
    
        function loaderBar() {
            $.ajax({
                type : 'get',
                url : 'json/indexdata.json',//请求数据的地址
                dataType : "json", //返回数据形式为json
                success : function(result) {
                    //请求成功时执行该函数内容,result即为服务器返回的json对象
                    $.each(result.rankList, function(index, item) {
                        yAxisData.push(item.name); //挨个取出类别并填入类别数组                    
                        dataAll.push(item.count); //挨个取出销量并填入销量数组
                    }); 
                                    drawChart(dataAll,yAxisData);
                }
    
            });
    
        }
    
            var drawChart = function(data,yAxisData){
    
                    var myChart = echarts.init(document.getElementById('line'));
    
                    var option = {
                                    backgroundColor : '#0f375f',
                                    title : [ {
                    text : "投诉原因TOP10",
                    x : '10%',
                    y : '1%',
                    textStyle : {
                        color : "#fff",
                        fontSize : "14"
                    }
                }, ],
                grid : [ {
                    x : '20%',
                    y : '7%',
                    width : '45%',
                    height : '90%'
                }, ],
                tooltip : {
                    formatter : '{b} ({c})'
                },
                xAxis : [ {
                    gridIndex : 0,
                    axisTick : {
                        show : false
                    },
                    axisLabel : {
                        show : false
                    },
                    splitLine : {
                        show : false
                    },
                    axisLine : {
                        show : false
                    }
                }, ],
                yAxis : [ {
                    gridIndex : 0,
                    interval : 0,
    
                    axisTick : {
                        show : false
                    },
                    axisLabel : {
                        show : true
                    },
                    splitLine : {
                        show : false
                    },
                    axisLine : {
                        show : false,
                        lineStyle : {
                            color : "white"
                        }
                    },
                } ],
                series : [ {
                    name : '投诉原因TOP10',
                    type : 'bar',
                    xAxisIndex : 0,
                    yAxisIndex : 0,
                    barWidth : '45%',
                    itemStyle : {
                        normal : {
                            color : 'blue'
                        }
                    },
                    label : {
                        normal : {
                            show : true,
                            position : "right",
                            textStyle : {
                                color : "white"
                            }
                        }
                    },
                   data : data.sort(),
                },
    
                ]
            };
           myChart.setOption(option); 
            }
    </script>
    
    点赞 评论
  • SmallYard
    SmallYard 2018-08-07 06:26

    这个原因是你ajax返回的数据格式不正确导致的。你把你默认写死的数据和你ajax返回的数据拿出来进行对比看下这两个数据格式的差异在哪里就知道了。
    这种差异包括括号的差异,必须保证一模一样就行了

    点赞 评论
  • a1024271896
    Ⅶ宗罪 2018-08-07 06:46

    你应该用返回的参数result用JSON.parse(result)来转成数组

    点赞 评论
  • qq_22701921
    指尖1993 2018-08-07 06:46

    可是我把这个重新定义,放到这个执行的里面去,依然没有办法显示哎。

     var dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
    
            var yAxisData = ['原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7',
                            '原因8', '原因9', '原因10'];
    
            $.ajax({
    
                type : 'get',
                url : 'json/indexdata.json',//请求数据的地址
                dataType : "json", //返回数据形式为json
                success : function(result) {
    
                    /* $.each(result.rankList, function(index, item) {
                        yAxisData.push(item.name); //挨个取出类别并填入类别数组                    
                        dataAll.push(item.count); //挨个取出销量并填入销量数组
                    }); */
                    myChart.hideLoading();  
    
                    option.yAxis.data=yAxisData;
                    option.series.data=dataAll;
                    myChart.setOption(option);  
    
                }
    
            });
    
    
    点赞 评论
  • a1024271896
    Ⅶ宗罪 2018-08-07 06:53

    success : function(result) {
    var result = JSON.parse(result); //你试试加这行试一下,这个就是将后台传过来的json格式转换成js用的格式.
    /* $.each(result.rankList, function(index, item) {

    点赞 评论
  • ejiao1233
    alunSemiconductor 2018-08-07 07:06

    建议看下你的Ajax回调是进入success方法还是error方法,然后才能确认问题。

    关于这个问题,我之前写过一篇博客可以参考下:
    https://blog.csdn.net/ejiao1233/article/details/81222792

    希望能帮到你。

    点赞 评论
  • qq_22701921
    指尖1993 2018-08-07 07:25

    解决了。我把它放在下面了:

     function loaderBar() {
            var myChart = echarts.init(document.getElementById('line'));
            var dataAll = [];
    
            var yAxisData = [];
    
            $.ajax({
    
                type : 'get',
                url : 'json/indexdata.json',//请求数据的地址
                dataType : "json", //返回数据形式为json
                success : function(result) {
                    if (result) {
                        $.each(result.rankList, function(index, item) {
                            yAxisData.push(item.name); //挨个取出类别并填入类别数组                    
                            dataAll.push(item.count); //挨个取出销量并填入销量数组
                        });
    
                        var option = {
                            backgroundColor : '#0f375f',
                            title : [ {
                                text : "投诉原因TOP10",
                                x : '10%',
                                y : '1%',
                                textStyle : {
                                    color : "#fff",
                                    fontSize : "14"
                                }
                            }, ],
                            grid : [ {
                                x : '20%',
                                y : '7%',
                                width : '45%',
                                height : '90%'
                            }, ],
                            tooltip : {
                                formatter : '{b} ({c})'
                            },
                            xAxis : [ {
                                gridIndex : 0,
                                axisTick : {
                                    show : false
                                },
                                axisLabel : {
                                    show : false
                                },
                                splitLine : {
                                    show : false
                                },
                                axisLine : {
                                    show : false
                                }
                            }, ],
                            yAxis : [ {
                                gridIndex : 0,
                                interval : 0,
                                data : yAxisData.reverse(),
                                axisTick : {
                                    show : false
                                },
                                axisLabel : {
                                    show : true
                                },
                                splitLine : {
                                    show : false
                                },
                                axisLine : {
                                    show : false,
                                    lineStyle : {
                                        color : "white"
                                    }
                                },
                            } ],
                            series : [ {
                                name : '投诉原因TOP10',
                                type : 'bar',
                                xAxisIndex : 0,
                                yAxisIndex : 0,
                                barWidth : '45%',
                                itemStyle : {
                                    normal : {
                                        color : 'blue'
                                    }
                                },
                                label : {
                                    normal : {
                                        show : true,
                                        position : "right",
                                        textStyle : {
                                            color : "white"
                                        }
                                    }
                                },
                                data : dataAll.sort(),
                            }, ]
                        };
                        myChart.hideLoading();
                        myChart.setOption(option);
                    }
    
                }
    
            });
    
        }
    

    这样,弄好之后就可以了。

    感谢各位

    点赞 评论

相关推荐