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 好的,我来看看,感谢
大约一年之前 回复

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

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

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

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

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的一端,数据已经拿到,但是展现出现了问题
大约一年之前 回复

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

 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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Echarts通过json从数据库中提去数据,XY轴不显示...
-
【echarts示例】jQuery引入json文件后,网页显示不了数据?
-
echarts3.0 引用json地图
-
如何用echarts图表获取后台json数据变成动态数据,
-
Android JSON解析数据显示问题
-
echarts 饼状图动态加载数据 图形不显示
-
JSON 取出数据
-
echarts里option数据,怎样能不重新加载?
-
json:后台保存在json中date数据,前台显示object
-
后端实时获取类似json格式的数据,获取后进行处理,传向前端页面,前端可以实时显示处理后的数据?
-
【无需代码】nodejs用tcp接收到数据后,怎么显示到echarts上呢
-
ajax json 咋显示数据库 数据
-
android json数据显示问题
-
java 后台数据转换成json数据格式
-
如何实现form表单提交后在当前页面显示服务器返回的json数据
-
【Echarts】怎么转换成Echarts地图数据需要的格式
-
一个关于ssm框架的json数据的显示问题
-
关于json与echarts的问题
-
layui无法渲染后端json数据
-
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收集私人信息,保...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
别再翻了,面试二叉树看这 11 个就够了~
写在前边 数据结构与算法: 不知道你有没有这种困惑,虽然刷了很多算法题,当我去面试的时候,面试官让你手写一个算法,可能你对此算法很熟悉,知道实现思路,但是总是不知道该在什么地方写,而且很多边界条件想不全面,一紧张,代码写的乱七八糟。如果遇到没有做过的算法题,思路也不知道从何寻找。面试吃了亏之后,我就慢慢的做出总结,开始分类的把数据结构所有的题型和解题思路每周刷题做出的系统性总结写在了 Github...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
接私活必备的 10 个开源项目!
点击蓝色“GitHubDaily”关注我加个“星标”,每天下午 18:35,带你逛 GitHub!作者 | SevDot来源 | http://1t.click/VE8W...
GitHub开源的10个超棒后台管理面板
目录 1、AdminLTE 2、vue-Element-Admin 3、tabler 4、Gentelella 5、ng2-admin 6、ant-design-pro 7、blur-admin 8、iview-admin 9、material-dashboard 10、layui 项目开发中后台管理平台必不可少,但是从零搭建一套多样化后台管理并不容易,目前有许多开源、免费、...
100 个网络基础知识普及,看完成半个网络高手
欢迎添加华为云小助手微信(微信号:HWCloud002或HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群;输入关键字“最新活动”,获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩! 1)什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2)OSI 参考模型的层次是什么? 有 7 个 OSI 层:物理...
VS CODE远程开发入门
在我们办公室,通常配置两台电脑,一台 Windows 主机,主要用于办公、即时通讯,一台 Linux 主机,用于开发。一般开发人员习惯用 Windows 系统下的工具,比如 Source Insight ,但代码需要在 Linux 下编译。这样就需要 Windows 和 Linux 之间协作,通常的做法是在 Linux 下安装 samba 服务,通过 Windows 共享访问。今天看到一篇文章,...
中国最顶级的一批程序员,从首富到首负!
过去的20年是程序员快意恩仇的江湖时代通过代码,实现梦想和财富有人痴迷于技术,做出一夜成名的产品有人将技术变现,创办企业成功上市这些早一代的程序员们创造的奇迹引发了一浪高...
为什么面向对象糟透了?
又是周末,编程语言“三巨头”Java, Lisp 和C语言在Hello World咖啡馆聚会。服务员送来咖啡的同时还带来了一张今天的报纸, 三人寒暄了几句, C语言翻开了...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
世界上最好的学习法:费曼学习法
你是否曾幻想读一遍书就记住所有的内容?是否想学习完一项技能就马上达到巅峰水平?除非你是天才,不然这是不可能的。对于大多数的普通人来说,可以通过笨办法(死记硬背)来达到学习的目的,但效率低下。当然,也可以通过优秀的学习法来进行学习,比如今天讲的“费曼学习法”,可以将你的学习效率极大的提高。 费曼学习法是由加拿大物理学家费曼所发明的一种高效的学习方法,费曼本身是一个天才,13岁自学微积分,24岁加入曼...
学Linux到底学什么
来源:公众号【编程珠玑】 作者:守望先生 网站:https://www.yanbinghu.com/2019/09/25/14472.html 前言 ​我们常常听到很多人说要学学Linux或者被人告知说应该学学Linux,那么学Linux到底要学什么? 为什么要学Linux 在回答学什么之前,我们先看看为什么要学。首先我们需要认识到的是,很多服务器使用的是Linux系统,而作为服务器应...
深入理解C语言指针
一、指针的概念 要知道指针的概念,要先了解变量在内存中如何存储的。在存储时,内存被分为一块一块的。每一块都有一个特有的编号。而这个编号可以暂时理解为指针,就像酒店的门牌号一样。 1.1、变量和地址 先写一段简单的代码: void main(){ int x = 10, int y = 20; } 这段代码非常简单,就是两个变量的声明,分别赋值了 10、20。我们把内存当做一个酒店,而每个房间就...
C语言实现推箱子游戏
很早就想过做点小游戏了,但是一直没有机会动手。今天闲来无事,动起手来。过程还是蛮顺利的,代码也不是非常难。今天给大家分享一下~ 一、介绍 开发语言:C语言 开发工具:Dev-C++ 5.11 日期:2019年9月28日 作者:ZackSock 也不说太多多余的话了,先看一下效果图: 游戏中的人物、箱子、墙壁、球都是字符构成的。通过wasd键移动,规则的话就是推箱子的规则,也就不多说了。 二、代...
面试官:兄弟,说说基本类型和包装类型的区别吧
Java 的每个基本类型都对应了一个包装类型,比如说 int 的包装类型为 Integer,double 的包装类型为 Double。基本类型和包装类型的区别主要有以下 4 点。
8000字干货:那些很厉害的人是怎么构建知识体系的
本文约8000字,正常阅读需要15~20分钟。读完本文可以获得如下收益: 分辨知识和知识体系的差别 理解如何用八大问发现知识的连接点; 掌握致用类知识体系的构建方法; 能够应用甜蜜区模型找到特定领域来构建知识体系。 1. 知识体系?有必要吗? 小张准备通过跑步锻炼身体,可因为之前听说过小腿变粗、膝盖受伤、猝死等等与跑步有关的意外状况,有点担心自己会掉进各种坑里,就在微信上问朋友圈一直晒跑步...
Android完整知识体系路线(菜鸟-资深-大牛必进之路)
前言 移动研发火热不停,越来越多人开始学习Android 开发。但很多人感觉入门容易成长很难,对未来比较迷茫,不知道自己技能该怎么提升,到达下一阶段需要补充哪些内容。市面上也多是谈论知识图谱,缺少体系和成长节奏感,特此编写一份 Android 研发进阶之路,希望能对大家有所帮助。 由于篇幅过长,有些问题的答案并未放在文章当中,不过我都整理成了一个文档归纳好了,请阅读到文末领取~ Ja...
网易云音乐你喜欢吗?你自己也可以做一个
【公众号回复 “1024”,免费领取程序员赚钱实操经验】今天我章鱼猫给大家带来的这个开源项目,估计很多喜欢听音乐的朋友都会喜欢。就目前来讲,很多人对这款音乐 App 都抱...
C语言这么厉害,它自身又是用什么语言写的?
这是来自我的星球的一个提问:“C语言本身用什么语言写的?”换个角度来问,其实是:C语言在运行之前,得编译才行,那C语言的编译器从哪里来? 用什么语言来写的?如果是用C语...
相关热词 用户权限才c# c#应用程序实例 c#请求接口数据 c#高效读写plc c#代码规范快捷方式 c#编辑模板 c# 内存存储 c# poi 生成图表 c#页面 弹出页面选择框 c# 不实现 继承接口