[ECharts]"echarts/config" is not exists

今天在给Echarts折线图中的数据点增加点击事件的时候总是出现一个

Uncaught Error: [MODULE_MISS]"echarts/config" is not exists!错误

查找了半天才明白是什么原因,这个错误引起的原因是下面这段代码的位置

[javascript] view plain copy

print?

  1. var ecConfig = require(‘echarts/config‘);

开始的时候我总是把它放在全局变量中,我们Echarts的模板中一般是这样的

[javascript] view plain copy

print?

  1. require(
  2. [
  3. ‘echarts‘,
  4. ‘echarts/chart/line‘ // 使用柱状图就加载bar模块,按需加载
  5. ],
  6. function (ec) {
  7. // 基于准备好的dom,初始化echarts图表
  8. var myChart = ec.init(document.getElementById(‘main‘));
  9. // 过渡---------------------
  10. myChart.showLoading({
  11. text: ‘正在努力的读取数据中...‘,
  12. });
  13. options = {...}
  14. ....
  15. }

我把

[javascript] view plain copy

print?

  1. var ecConfig = require(‘echarts/config‘);

这段代码放在了require外边,所以总是报错。

调整之后应该是放在 function(ec){..}中,类似下面的代码结构

[javascript] view plain copy

print?

  1. require(
  2. [
  3. ‘echarts‘,
  4. ‘echarts/chart/line‘ // 使用柱状图就加载bar模块,按需加载
  5. ],
  6. function (ec) {
  7. var ecConfig = require(‘echarts/config‘); //我在这里
  8. // 基于准备好的dom,初始化echarts图表
  9. var myChart = ec.init(document.getElementById(‘main‘));
  10. // 过渡---------------------
  11. myChart.showLoading({
  12. text: ‘正在努力的读取数据中...‘,
  13. });
  14. options = {...}
  15. ....
  16. }

这样的话加载就没有问题了,也可以正常的监听事件了, 这个应该和require的用法有很大关系,由于前端功底比较差才导致这种错误,以后要小心。

本文出自 “orangleliu笔记本”博客,请务必保留此出处http://blog.csdn.net/orangleliu/article/details/39554001

时间: 2024-10-25 16:29:08

[ECharts]"echarts/config" is not exists的相关文章

Echarts报错[MODULE_MISS]"echarts/config" is not exists!

项目用到Echarts插件,时下比较流行的是模块化包引入,但是很悲催的是楼主用的是标签式引入,所以从官网copy来的代码总是报一个 [MODULE_MISS]"echarts/config的错误,在这里,楼主对模块化包引入并没有学习,所以此文只是提醒那些项目用了标签式引入的同学们 啰嗦一句,所谓标签式引入就是用js的标签引入在html页面中导入js文件 形如 : <script type="text/javascript" src="${cxtPath}/as

Echarts 报错:Uncaught Error: [MODULE_MISS]&quot;echarts/config&quot; is not exists!

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 问题: 报错:Uncaught Error: [MODULE_MISS]"echarts/config" is not exists! 原因: require( [ 'echarts', 'echarts/chart/scatter' ], function (ec) { // 基于准备好的dom,初始化echarts图表 myScatter = ec.init(docum

[echarts] - echarts量化比较图表类型解析

https://echarts.baidu.com/examples/editor.html?c=watermark <!DOCTYPE html> <!--用作两种货品的参数对比--> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; marg

通过百度echarts实现数据图表展示功能

现在我们在工作中,在开发中都会或多或少的用到图表统计数据显示给用户.通过图表可以很直观的,直接的将数据呈现出来.这里我就介绍说一下利用百度开源的echarts图表技术实现的具体功能. 1.对于不太理解echarts是个怎样技术的开发者来说,可以到echarts官网进行学习了解,官网有详细的API文档和实例供大家参考学习. 2.以下是我在工作中实现整理出来的实例源码: 公用的支持js文件 echarts.js.echarts.min.js,还有其他的图表需要支持的js文件也可以到官网下载 echa

Echarts 学习系列(3)-Echarts动态数据交互

写在前面 上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件 开发环境:win10 家庭版 开发工具:Visual Studio 2019 数据库:MySQL 数据连接工具:Navicat Premium 使用技术:.Net Mvc+Dapper 创建数据库 //创建 sys_visitoronhour DROP TABLE IF EXISTS `sys_visitoronhour

echarts高级使用

上一篇文章中介绍了echarts中柱状图的使用,从demo中我们可以看到不管是柱状图还是饼状图或者是折线图,都是导入js,准备option参数.为了使用方便我们下一步要做的就是封装了. 我们把图形类型和图形数据与图形显示分离开来,封装独立的js文件,只要传给他图形类型参数和图形数据参数就能显示出对应的图形,这样就不会出现太多的冗余代码.接下来我们说封装js文件. 是柱状图封装柱状图的js饼状图封装饼状图的js呢,还是所有的图形封装成一个js呢?如果我们单独封装,就把option内容中变化的图形数

【ECharts】SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

1导入包,搭建SSH框架. 导入JQuery的JS包,<script src="JS/jquery-1.7.1.js"></script> 导入ECharts的包.<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script> 前提你的SSH已经搭好了,数据已经传递到了Struts层. 2在Action层,将数据封装成J

echarts对每个data[i]的图片添加点击事件

1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", function (param){ alert(param.dataIndex+':'+option1.series[0].data[param.dataIndex].name); }); 2.效果图 3.目录结构 4.<head></head>和<body></b

Echarts的使用方法

效果图: 1. 在echarts官网下载包,解压后,将文件Echarts\echarts-2.2.7\echarts-2.2.7\doc\example\www\js\echarts.js文件拷贝,放到eclipse中. 2. 创建jsp页面即可 注意:1)红色表示是框架,换不同的样式也不用动的 2)option是换样式的,如柱状图等等,具体代码参考百度官网 3)本例中的x值是控制上图中左侧文字与左边的距离大小 4)需要在body中给其一个容器. <!-- 为ECharts准备一个具备大小(宽高