一：错误描述：echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.

二：错误原因：echarts在用json数据请求时未调用

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">

         <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>

         <script type="text/javascript" src="../js/echarts.js" ></script>

         <script>

             var myChart2 = echarts.init(document.getElementById('main2'));  

             myChart2.setOption({

                 title: {

                     text: '异步数据加载示例'

                 },

                 tooltip: {},

                 legend: {

                     data:['销量']

                 },

                 xAxis: {

                     data: []

                 },

                 yAxis: {},

                 series: [{

                     name: '销量',

                     type: 'bar',

                     data: []

                 }]

             });

             $.get('../js/data.json').done(function (data) {  

                 console.dir(data);

                 // 填入数据

                 myChart2.setOption({

                     xAxis: {

                         data: data.categories

                     },

                     series: [{

                         // 根据名字对应到相应的系列

                         name: '销量',

                         data: data.data

                     }]

                 });  

             });  

         </script>

     </head>

     <body>

         <div id="chart" style="width: 1200px; height: 560px;"></div>

     </body>

 </html>

数据请求格式：

 {

     "categories": [

         "衬衫",

         "羊毛衫",

         "雪纺衫",

         "裤子",

         "高跟鞋",

         "袜子"

     ],

     "data": [

         5,

         20,

         36,

         10,

         10,

         20

     ]

 }

三：解决办法：

（1）将上述代码放在一个函数中，然后在onload中调用这个函数

（2）用jQuery方法

 <script>

             $(document).ready(function(){

                 var chart = document.getElementById('chart');

                 var chartData = echarts.init(chart);  

                 chartData.setOption({

                     title: {

                         text: '异步数据加载示例'

                     },

                     tooltip: {},

                     legend: {

                         data:['销量']

                     },

                     xAxis: {

                         data: []

                     },

                     yAxis: {},

                     series: [{

                         name: '销量',

                         type: 'bar',

                         data: []

                     }]

                 });  

                 $.get('../js/data.json').done(function (data) {  

                     console.dir(data);

                     // 填入数据

                     chartData.setOption({

                         xAxis: {

                             data: data.categories

                         },

                         series: [{

                             name: '销量',

                             data: data.data

                         }]

                     });  

                 });  

                 function eConsole(param)

                 {

                     console.dir(param);

                 }  

                 chartData.on("click",eConsole);

             });  

         </script>

echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.的更多相关文章

  1. (原)Echarts 报Uncaught Error: Initialize failed: invalid dom 根本解决

    1.循环出的Echarts出现 Uncaught Error: Initialize failed: invalid dom ,附上完美解决方案 setTimeout(function () { co ...

  2. bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6

    自己写了个Django系统,用到了Django-bootstrap3结果在浏览器控制台发现报错:bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaS ...

  3. myeclipse中导入js报如下错误Syntax error on token "Invalid Regular Expression Options", no accurate correc

    今天在使用bootstrap的时候引入的js文件出现错误Syntax error on token "Invalid Regular Expression Options", no ...

  4. android模拟器 一个错误：X Error of failed request: BadRequest (invalid request code or no such operation)

    最近ubuntu12.04学习python,python2.7 python3.2所不同的是还是蛮大的.学习思考的新 升级后 结果显示 输入方法不显示   update-manager 和  add- ...

  5. Echarts 报错：Uncaught Error: [MODULE_MISS]"echarts/config" is not exists!

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code   问题: 报错:Uncaught Error: [MODULE_MISS]" ...

  6. rdesktop ERROR: CredSSP: Initialize failed, do you have correct kerberos tgt initialized ? Failed to connect, CredSSP required by server

    错误信息: ERROR: CredSSP: Initialize failed, do you have correct kerberos tgt initialized ? Failed to co ...

  7. Android JS 交互出现 Uncaught Error: Error calling method on NPObject

    由于HTML5的功能越来越强大,native app的一些功能逐步被html页面代替,不可避免的JS交互也用到的也越来越多.在第一个版本向第二个版本迭代的过程中却发生了莫名其妙的问题,第一个版本JS调 ...

  8. axios请求报Uncaught (in promise) Error: Request failed with status code 404

    使用axios处理请求时,出现的问题解决 当url是远程接口链接时,会报404的错误: Uncaught (in promise) Error: Request failed with status ...

  9. Uncaught Error: Script error for "popper.js", needed by: bootstrap - require.js

    Uncaught Error: Script error for "popper.js", needed by: bootstrap https://requirejs.org/d ...

随机推荐

  1. Json日期格式 转化为 YYYY-MM-DD-hh-mm-ss

    function timeStamp2String(time) { var datetime = new Date(); datetime.setTime(time); var year = date ...

  2. Python3.x：百分比数转小数

    Python3.x:百分比数转小数 def change_percent(num): zfflag = "" if "+" in num: num = num. ...

  3. Linux服务器配置秘钥对连接

    [root@check2 ~]# ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in which to sa ...

  4. Linux下多线程下载工具MWget和Axel使用介绍

    linux运维在操作linux过程中,用得最多的linux下载工具想必一定是wget,没有看到哪一台服务器没装过wget的,或许有人使用ftp下载,也有人使用多线程的axel以及ProZilla,毫无 ...

  5. pexpect实现远程操作

    #!/usr/bin/pythonimport pexpectimport syssip="ssh root@172.10.224.183"try: child=pexpect.s ...

  6. 数组排序array_multisort

    array_multisort --对多个数组或者多维数组进行排序[参考:secure.php.net] 说明: bool array_multisort ( array &$array1 [ ...

  7. Github删除账号方法

    1.登录后点击头像,选择Settings 2.选择Account,然后再选择Delete your account 3.第一个输入框输入邮箱或者用户名,第二个输入框输入delete my accoun ...

  8. 线段树 - HDU1166 - 敌兵布阵

    2017-07-29 16:41:00 writer:pprp 线段树跟区间操作相关,想要在题目限定的时间内解决问题就需要用线段树这种数据结构来解决: 线段树是一种二叉平衡树 参考书目:张新华的< ...

  9. 【转】和菜鸟一起学linux之DBUS基础学习记录

    [原文] D-Bus三层架构 D-Bus是一个为应用程序间通信的消息总线系统, 用于进程之间的通信.它是个3层架构的IPC 系统,包括: 1.函数库libdbus ,用于两个应用程序互相联系和交互消息 ...

  10. MySql 存储过程实例 - 转载

    MySql 存储过程实例 将下面的语句复制粘贴可以一次性执行完,我已经测试过,没有问题! MySql存储过程简单实例:                                          ...