<!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. OKMX6Q libx264交叉编译

    最开始使用的是最新版x264-snapshot-20171119-2245 配置使用: ./configure --host=arm-linux --cross-prefix=arm-linux- - ...

  2. ffmpeg批量实现视频转码命令行

    ffmpeg实现视频转码命令行,result需要提前建好作为保存转码后的视频路径: ffmpeg -i .mp4 -vcodec h264 "result\1.mp4" 当有大量视 ...

  3. Java数据持久层框架 MyBatis之背景知识一

    对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...

  4. 微信小程序+和风天气完成天气预报

    <冷暖自知>天气小程序 学无止境,以玩儿玩儿的心态去学习! 花半天时间完成简单的小程序应用.适合小程序初学者. 申请小程序帐号: https://mp.weixin.qq.com/wxop ...

  5. 程序员之殇 —— One program, One king (血月)

    Are we living in the time of the end? (程序员的时代是否已经终结了?) 最近,我时常问自己这个问题. 刚读完了一个美国博士的论文,UDT (UDP-based D ...

  6. MySQLdb 部署

    1.windows 下载后,直接安装即可 http://www.jb51.net/softs/73369.html#download 双击安装 MySQL-python-1.2.3.win32-py2 ...

  7. Tomcat对Struts中的Action进行授权利

    .应用的意义 在某些应用下,如果Action类执行的功能比较重要,可以对该Action类进行授权利以实现只有特定角色的用户能够访问,此时可以在struts-config.xml文件中进行配置   2. ...

  8. zabbix3.2_yum官方文档centos 7版

    Installation from packages 1 Repository installation 2 Server installation with MySQL database 3 Ser ...

  9. Win10下通过IIS调试ASP程序遇到的问题和解决方案

    最近维护了以前别人的写的一个ASP的系统,记录一下调试过程中的问题和解决方案. 环境篇 万维网发布服务(W3SVC)已经停止 问题: 万维网发布服务(W3SVC)已经停止.除非万维网发布服务(W3SV ...

  10. 将excel文件内容存储到数据库，并可以实时在前端查看（不必生成文件）

    版权声明:本文为博主原创文章,未经博主允许不得转载 本文主要讲前端内容,后端涉及较少,可以认为是使用Java. 首先是excel文件上传,这个较为简单,可以html5的数据接口FormData()进行 ...