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个回答

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

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

qq_22701921
指尖1993 好的,我来看看,感谢
大约 2 年之前 回复

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

qq_22701921
指尖1993 我试试,谢谢
大约 2 年之前 回复

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

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

            }

        });

qq_22701921
指尖1993 回复a1024271896: 我来看看数据是不是不一样
大约 2 年之前 回复
qq_22701921
指尖1993 回复a1024271896: 主要是前台没有报错,所以有点儿坑。
大约 2 年之前 回复
a1024271896
夏天wx:a1024271896 你看看你的前后台报的什么错误
大约 2 年之前 回复
a1024271896
夏天wx:a1024271896 而且你的x,y轴本身里面就有数据,是不是加的时候拼接的有问题
大约 2 年之前 回复

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

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

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

希望能帮到你。

qq_22701921
指尖1993 谢谢,是进入了success的一端,数据已经拿到,但是展现出现了问题
大约 2 年之前 回复

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

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

            }

        });

    }

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

感谢各位

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐