`
qll3609120
  • 浏览: 56857 次
社区版块
存档分类
最新评论

echarts最新版怎么在项目中使用,针对requireJs路径问题

阅读更多

echarts自从2.18版本后引入了全新的单文件打包构建策略 导致在实际项目中引入的时候有很多问题解决办法

1、requireJs引入echarts,采用包引入packages,如:

packages: [
	           {
	               name: 'echarts',
	               location: 'lib/thirdparty/echarts/src',
	               main: 'echarts'
	           },
	           {
	               name: 'zrender',
	               location: 'lib/thirdparty/zrender/src', // zrender与echarts在同一级目录
	               main: 'zrender'
	           }
	       ],

 2、调用init方法,参数dom元素使用document.getElementById获取需要渲染的区域

 3、可能产生的错误:1)、ComponentClass is undefined 解决办法:把图表使用的标签模块化。

    var componentLibrary = require('./component');
            componentLibrary.define('title', require('./component/title'));
            componentLibrary.define('tooltip', require('./component/tooltip'));
            componentLibrary.define('legend', require('./component/legend'));
            componentLibrary.define('axis', require('./component/axis'));
            componentLibrary.define('base', require('./component/base'));
            componentLibrary.define('dataView', require('./component/dataView'));
            componentLibrary.define('dataZoom', require('./component/dataZoom'));
            componentLibrary.define('grid', require('./component/grid'));
            componentLibrary.define('legend', require('./component/legend'));
            componentLibrary.define('polar', require('./component/polar'));
            componentLibrary.define('timeline', require('./component/timeline'));
            componentLibrary.define('toolbox', require('./component/toolbox'));
            componentLibrary.define('valueAxis', require('./component/valueAxis'));
            componentLibrary.define('dataRange', require('./component/dataRange'));
            componentLibrary.define('roamController', require('./component/roamController'));

 2)XX has not been required. 未加载相应的js模块,在echarts.js 文件中找到

var chartLibrary = require('./chart');

添加你需要加入的模块,

 chartLibrary.define('line', require('./chart/line'));
            chartLibrary.define('map', require('./chart/map'));

  

 

 

分享到:
评论

相关推荐

    echarts在jsp中使用配置手册

    Echarts在JSP中的使用配置手册 ...在JSP中使用Echarts需要创建Echarts文件夹,引入Echarts JS文件,配置RequireJS,初始化Echarts实例,并创建option对象来配置图表。通过这些步骤,可以快速构建数据可视化应用。

    使用gulp解决requireJs项目前端缓存问题

    总的来说,通过gulp与相关插件的配合,我们可以有效地解决requireJS项目中的前端缓存问题,提高开发效率并确保用户始终获取到最新版本的应用。在实际项目中,你可能需要根据具体需求调整和扩展这个流程,例如添加...

    requireJS初学者完整例子

    RequireJS是前端开发中一款非常重要的模块化加载库,它主要解决了JavaScript在浏览器环境中异步加载和组织代码的问题。这个“requireJS初学者完整例子”提供了学习RequireJS的基础步骤和实践操作,帮助初学者快速...

    前端项目-requirejs-plugins.zip

    5. `examples` - 示例代码,演示如何在实际项目中使用插件。 6. `test` - 测试用例,确保插件功能正常。 7. `.gitignore` - Git忽略文件列表,指示哪些文件不需要被版本控制。 8. `package.json` - 项目元数据和依赖...

    前端项目-requirejs-tpl.zip

    【标题】"前端项目-requirejs-tpl"指的是一个基于前端技术构建的项目,其中使用了RequireJS和UnderscoreJS的模板插件。RequireJS是JavaScript的一个模块化管理工具,它使得在浏览器环境中实现模块化的JavaScript代码...

    使用gulp和requirejs快速构建一个前端项目

    在项目中引入 `requireJS` 可以帮助我们更好地组织代码,提高代码复用性和可维护性。 在项目目录下创建 `src/main.js`,作为 `requireJS` 的配置文件: ```javascript require.config({ baseUrl: 'js', paths: {...

    requireJS实例

    RequireJS 是一个 JavaScript 文件和模块加载器,它使得在浏览器端组织和管理代码变得更加有序,尤其是在大型项目中。 RequireJS 的核心理念是依赖前置,即在执行任何代码之前,先声明其依赖的模块,这样可以确保按...

    requireJS + angularJs的项目构架

    在本项目中,requireJS负责管理代码的依赖关系,使得各个模块能够按需加载,提高页面加载速度。通过配置requireJS的main.js,我们可以指定应用的入口点,并定义各个模块的路径和依赖。 AngularJS则是Google推出的一...

    requireJs学习文档+demo

    RequireJS 是一个 JavaScript 文件和模块加载器,它使得在浏览器端使用异步方式来加载和组织脚本,从而解决了大型JavaScript应用中代码依赖管理和加载效率的问题。RequireJS 的设计思想深受 CommonJS 和 AMD...

    RequireJS全面讲解

    RequireJS 是一个JavaScript模块化开发的库,特别适用于在浏览器环境中管理JavaScript文件的加载和组织。它基于异步模块定义(AMD)规范,允许开发者异步加载和执行模块,解决了传统JavaScript开发中依赖关系处理的...

    ionic项目应用requireJs前端模块化 示例

    在本文中,我们将深入探讨如何在 Ionic 项目中利用 RequireJS 进行前端模块化开发。RequireJS 是一个流行的 JavaScript 模块加载器和构建工具,它使得代码组织更加有序,便于维护和优化。Ionic 是一个基于 AngularJS...

    requirejs_Demo演示

    在`requirejs_Demo`这个示例中,我们将深入探讨requireJS的使用方法,以及如何在实际项目中应用它。 1. **模块定义**:在requireJS中,每个JavaScript文件都可以作为一个模块。通过`define`函数定义模块,该函数...

    ionic-requirejs实例

    在本文中,我们将深入探讨如何将Ionic框架与RequireJS结合使用,实现项目的模块化管理。Ionic是一个基于AngularJS构建移动应用的开源框架,而RequireJS则是一个JavaScript模块加载器,它使得JavaScript代码能够遵循...

    快速理解RequireJs

    RequireJS 是一个JavaScript库,主要用于组织和加载JavaScript模块,尤其在大项目中,它能帮助开发者实现异步加载,提高页面性能。RequireJS的核心概念是AMD(Asynchronous Module Definition),这是一种处理...

    angularjs_requirejs demo

    **RequireJS** 则是一个JavaScript模块加载器和打包工具,它遵循AMD(Asynchronous Module Definition)规范,使得JavaScript可以实现异步模块加载,从而解决了大型项目中代码的组织和依赖管理问题。通过RequireJS,...

    RequireJS 使用文档

    5. **shim 配置**:对于非AMD(Asynchronous Module Definition)兼容的旧版库,可以使用`shim`配置来模拟模块化,声明它们的依赖关系,以便RequireJS能正确加载。 6. **模块定义**:模块定义通常包含依赖列表和一...

    requirejs demo

    - 可能存在一些测试用例或例子,展示如何在代码中使用RequireJS加载和使用模块。 通过这个示例项目,你可以学习到如何组织和管理前端代码,以及如何利用RequireJS提升代码的可维护性和性能。通过实践,你可以更深入...

    RequireJS 2.1.9 API 中文 PDF

    - **WebWorker支持**:在WebWorker环境中使用RequireJS需要特别配置。 - **Rhino支持**:Rhino是一个JavaScript解释器,可以在Java平台上运行JavaScript。RequireJS也支持在Rhino环境中运行。 - **错误处理**:在...

    requirejs中文版参考文档.pdf

    仅供参考,版权归requirejs中文网所有。

    requirejs-2.1.17.zip

    RequireJS 是一个JavaScript库,主要用于解决在浏览器环境中管理和加载JavaScript模块的问题。它的核心功能是实现异步模块定义(AMD)规范,使得JavaScript代码可以按照模块化的方式组织,从而提高代码的可维护性和...

Global site tag (gtag.js) - Google Analytics