一：错误描述：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. xshell如何同时打开多个标签

    查看标签>>>>>回话选项卡>>>>>> 打钩即可

  2. datagrid 编辑

    spark:DataGrid编辑状态进入需要在选中一行高亮状态之后,再次点击该单元格,这样,相信非常符合开发人员的控制手法及大众使用习惯,这,是一点非常好的改良. 同时,它取缔了itemEditEnd ...

  3. pt-osc测试

    pt-osc测试 1.原表必须存在主键 PRIMARY KEY 或者 UNIQUE KEY The new table `darren`.`_t_user_new` does not have a P ...

  4. PHP memcache扩展模块安装

    安装php扩展模块memcache memcache 的工作就是在专门的机器的内存里维护一张巨大的hash表,来存储经常被读写的一些数组与文件,从而极大的提高网站的运行效率,减轻后端数据库的读写压力. ...

  5. MATLAB安装libsvm工具箱的方法

    支持向量机(support vector machine,SVM)是机器学习中一种流行的学习算法,在分类与回归分析中发挥着重要作用.基于SVM算法开发的工具箱有很多种,下面我们要安装的是十分受欢迎的l ...

  6. zabbix邮件报警变量表

    常用变量值 默认接收人:故障{TRIGGER.STATUS},服务器:{HOSTNAME1}发生: {TRIGGER.NAME}故障! 默认信息: 告警主机:{HOSTNAME1} 告警时间:{EVE ...

  7. Servlet容器初始化IOC容器

    <!-- ServletContext参数,配置Ioc容器的xml文件名 --> <context-param> <param-name>contextConfig ...

  8. 初入Spring-boot(一)

    一.利用eclipse快速创建Spring-boot项目 1.首先去http://start.spring.io网站,勾选所需要的starter,如图: 选择完之后下载该文件,打开后发现是一个正常的m ...

  9. Count and Say，统计并输出，利用递归，和斐波那契数列原理一样。

    问题描述:n=1,返回“1”:n=2,返回“11”:n=3,返回“21”:n=4,返回1211,.... 算法分析:和斐波那契数列道理差不多,都是后一个要依赖前一个元素.因此可以使用递归,也可以使用迭 ...

  10. Java多线程 - 线程同步

    多线程操作同一个对象时,容易引发线程安全问题.为了解决线程安全问题,Java多线程引入了同步监视器. 同步代码块 同步代码块语法格式如下: synchronized(obj){ //此处的代码即为同步 ...