<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="../js/skin1/build/dist/echarts.js" charset="UTF-8"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

            // 基于准备好的dom，初始化echarts实例

            var myChart = ec.init(document.getElementById('main'));

            // 指定图表的配置项和数据

            var option = {

                title: {

                    text: 'ECharts 入门示例'

                },

                tooltip: {},

                legend: {

                    data: ['销量']

                },

                xAxis: {

                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

                },

                yAxis: {},

                series: [{

                    name: '销量',

                    type: 'bar',

                    data: [5, 20, 36, 10, 10, 20]

                }]

            };

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option);

    </script>

　

以上代码会报如下错误：

我们可以按如下步骤操作：

  1. 配置图表路径
  2. 加载图表js文件
  3. 绘制图表

　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="../js/skin1/build/dist/echarts.js" charset="UTF-8"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        require.config({

            paths: {

                echarts: '../js/skin1/build/dist'

            }

        }

        );

        require(

            [

                'echarts',
                'echarts/chart/bar',

                'echarts/chart/line'

            ],

            DrawEChart //异步加载的回调函数绘制图表

        );

        function DrawEChart(ec) {

            // 基于准备好的dom，初始化echarts实例

            var myChart = ec.init(document.getElementById('main'));

            // 指定图表的配置项和数据

            var option = {

                title: {

                    text: 'ECharts 入门示例'

                },

                tooltip: {},

                legend: {

                    data: ['销量']

                },

                xAxis: {

                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

                },

                yAxis: {},

                series: [{

                    name: '销量',

                    type: 'bar',

                    data: [5, 20, 36, 10, 10, 20]

                }]

            };

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option);

        }

    </script>

</body>

</html>

　　

关于echarts 报错 初始化对象未定义的更多相关文章

  1. 为什么报错说req未定义，createServer只接受匿名函数吗？

    var http = require('http');var server = new http.createServer(handlerRequest(req,res));server.listen ...

  2. linux报错：命令未找到

    前段时间看到一个比较好玩的项目:[musicbox](https://github.com/darknessomi/musicbox) 开始用git clone安装,输入命令无法运行.开始以为安装有问 ...

  3. jquery1.8 在IE8 下面报错：对象不支持此属性或方法 return b.getAttribute("id")===a

    jquery1.8 在IE8 下面报错: 对象不支持此属性或方法 调试发现是下面这一行报错: 在IE8下面报错,在chrome和firefox都是好的. 实在找不到原因,最后把源码改成下面这样: 没有 ...

  4. Mac安装HomeBridge适配小米Homekit报错：module未找到解决

    Mac安装HomeBridge适配小米Homekit报错:module未找到 具体错误是: module.js:471 throw err; balabalal...... 问了一圈,终于解决,但是又 ...

  5. Oozie调度报错——ORA-00918：未明确定义列

    Oozie在执行sqoop的时候报错,同样的SQL在sqoop中可用,在oozie中不可用: Caused by: java.sql.SQLSyntaxErrorException: ORA-0091 ...

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

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

  7. echarts报错Cannot read property 'features' of undefined

    引入地图的时候 echarts2报错: Uncaught Error: [MODULE_MISS]"echarts/src/util/mapData/params" is not ...

  8. 在vue中使用echarts报错Cannot read property getAttribute of null

    报错信息如下: 报错代码: mounted() { // ... this.drwaCharts() // drawCharts方法为自己定义的包含渲染 echarts 图表的方法 // ...} 之 ...

  9. Echarts报错 Can't read property 'getWidth' of null

    统计图报错: 这里的报错与echarts无关,与zrender有关,zrender是echarts依赖的canvas绘图库 你不需要了解zrender,这个问题是你代码出了错 谨记::代码的错

随机推荐

  1. Hadoop问题：启动hadoop 2.6遇到的datanode启动不了

    问题描述:第一次启动输入jps都有,第二次没有datanode 日志如下: 查看日志如下: -- ::, INFO org.mortbay.log: Started HttpServer2$Selec ...

  2. Spring学习之路三——第一个Spring程序（体会IoC）

    体会IoC:Spring通过一种称作控制反转(IoC)的技术促进了松耦合.当应用了IoC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创建或者查找依赖对象.你可以认为IoC与JN ...

  3. CCF系列之数字排序(201503-2)

    问题描述试题编号: 201503-2试题名称: 数字排序时间限制: 1.0s内存限制: 256.0MB问题描述: 问题描述 给定n个整数,请统计出每个整数出现的次数,按出现次数从多到少的顺序输出. 输 ...

  4. shopnc IM配置过程

    im配置windows下,修改chat下和data下的config,安装node,覆盖node下文件即可

  5. linux_NFS

    NFS是什么? 网络文件系统,又叫共享存储,通过网络连接让不同主机之间实现共享存储. 应用于存放图片.附件.视频等用户上传文件 相关同类应用:大型网站nfs有压力,使用moosefs(mfs),Ghu ...

  6. JAVA中利用反射机制进行对象和Map相互转换的方法

    JAVA的反射机制主要作用是用来访问对象的属性.方法等等.所以,JAVA中对象和Map相互转换可以利用JAVA的反射机制来实现.例子如下: 一.对象转Map的方法 public static Map& ...

  7. jQuery的Nicescroll滚动条插件使用方法

    Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触 ...

  8. 【转】sed & awk常用正则表达式

    正则表达式元字符 正则表达式中有两种基本元素: 以字面值或变量表示的值(如.代表任意单个字符). 操作符(如*代表将前面的字符重复任意次). 元字符汇总 特殊字符 用途 . 匹配除换行符以外的任意单个 ...

  9. 手把手 学习Git

    一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...

  10. Mysql Innodb 锁机制

    latch与lock latch 可以认为是应用程序中的锁,可以称为闩锁(轻量级的锁) 因为其要求锁定的时间必须要非常短,若持续时间长,则会导致应用性能非常差,在InnoDB存储引擎中,latch又可 ...