关于echarts 报错 初始化对象未定义
<!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>
以上代码会报如下错误：
我们可以按如下步骤操作：
- 配置图表路径
- 加载图表js文件
- 绘制图表
<!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 报错 初始化对象未定义的更多相关文章
- 为什么报错说req未定义，createServer只接受匿名函数吗？
var http = require('http');var server = new http.createServer(handlerRequest(req,res));server.listen ...
- linux报错：命令未找到
前段时间看到一个比较好玩的项目:[musicbox](https://github.com/darknessomi/musicbox) 开始用git clone安装,输入命令无法运行.开始以为安装有问 ...
- jquery1.8 在IE8 下面报错：对象不支持此属性或方法 return b.getAttribute("id")===a
jquery1.8 在IE8 下面报错: 对象不支持此属性或方法 调试发现是下面这一行报错: 在IE8下面报错,在chrome和firefox都是好的. 实在找不到原因,最后把源码改成下面这样: 没有 ...
- Mac安装HomeBridge适配小米Homekit报错：module未找到解决
Mac安装HomeBridge适配小米Homekit报错:module未找到 具体错误是: module.js:471 throw err; balabalal...... 问了一圈,终于解决,但是又 ...
- Oozie调度报错——ORA-00918：未明确定义列
Oozie在执行sqoop的时候报错,同样的SQL在sqoop中可用,在oozie中不可用: Caused by: java.sql.SQLSyntaxErrorException: ORA-0091 ...
- Echarts 报错：Uncaught Error: [MODULE_MISS]"echarts/config" is not exists!
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 问题: 报错:Uncaught Error: [MODULE_MISS]" ...
- echarts报错Cannot read property 'features' of undefined
引入地图的时候 echarts2报错: Uncaught Error: [MODULE_MISS]"echarts/src/util/mapData/params" is not ...
- 在vue中使用echarts报错Cannot read property getAttribute of null
报错信息如下: 报错代码: mounted() { // ... this.drwaCharts() // drawCharts方法为自己定义的包含渲染 echarts 图表的方法 // ...} 之 ...
- Echarts报错 Can't read property 'getWidth' of null
统计图报错: 这里的报错与echarts无关,与zrender有关,zrender是echarts依赖的canvas绘图库 你不需要了解zrender,这个问题是你代码出了错 谨记::代码的错
随机推荐
- RPC架构简单理解
RPC(Remote Promote Call) 一种进程间通信方式.允许像调用本地服务一样调用远程服务. RPC框架的主要目标就是让远程服务调用更简单.透明.RPC框架负责屏蔽底层的传输方式(TCP ...
- UML学习网址列表
在线绘图工具ProcessOn:https://www.processon.com/support#mind-format 鲁棒图实例:http://blog.csdn.net/joeyon1985/ ...
- 我的踩坑之旅-跨域问题引发bug
场景: 由于业务原因需要在请求中添加一个信息表明请求的source,经过一轮方案的评审,大家共同决定把这source信息存放在消息header中.前端小伙伴听完之后心里暗自偷笑:就一行的代码的事,请求 ...
- dotween tips
涉及kill及复用的行为比较奇怪. 使用shortcut方式调用dotween时,每次调用都是增加一个新的tweener,如果该tweener控制的属性与上次调用相同时,会出现奇怪的行为,应该是多个t ...
- java之静态代理和动态代理
我们以几个问题,来开始我们今天的学习,如果下面几个问题,你都能说出个一二,那么恭喜你,你已经掌握了这方面的知识.1,什么是代理模式?2,Java中,静态代理与动态代理的区别?3,Spring使用的是J ...
- 浅谈计算机中的IO模型
IO模型一共有5种: blocking IO #阻塞IO nonblocking IO #非阻塞IO IO myltiplexing #IO多路复用 signal driven IO #信号驱动IO ...
- 正确理解python的装饰器
一直在用别人写的装饰器,从来没有对其原理进行深入的探究.今天趁有点闲着的时间,把装饰器的原理好好看了一遍,做一下整理. 一.装饰器的基本原理 装饰器就是一个可以接受调用也可以返回调用的调用.装饰器本身 ...
- Spring源码情操陶冶-DefaultBeanDefinitionDocumentReader#parseBeanDefinitions
前言-阅读源码有利于陶冶情操,本文承接前文Spring源码情操陶冶-AbstractApplicationContext#obtainFreshBeanFactory 前文提到最关键的地方是解析bea ...
- Cannot read property 'component' of undefined 即vue-router 0.x转化为2.x
原文链接:http://blog.csdn.net/m0_37754657/article/details/71269988 由于vue版本为1.0,没有一些vue-router指令:因而需要vue- ...
- POJ [P2594] Treasure Exploration
DAG图上可相交最小路径覆盖 先求给定DAG的传递闭包,将任意相连的两点加入二分图中,然后就是经典的不相交最小路径覆盖 所谓传递闭包就是将DAG图中任意点间的连通关系处理出来,用Floyd即可 #in ...