layui模块化加载百度Echart插件(v3.8.4)

分享 未结
16 3889
QuietlyChan
悬赏:20飞吻
首先请先看下链接的这篇文章,了解下封装第三方组件
http://fly.layui.com/jie/5080/

最近用到Echart图标插件,参考了上面这篇文章进行自己封装,发现了一些坑,现在分享给大家

这是文章中提到的「UMD 规范」写法
(function (window, factory) {
if (typeof exports === 'object') { // 支持 CommonJS
module.exports = factory();
} else if (typeof define === 'function' && define.amd) { // 支持 AMD
define(factory);
} else {
window.eventUtil = factory();
}
})(this, function () {
// 模块源代码
//module ...
});
现在需要添加对layui支持的判断,教程代码如下
} else if (window.layui && layui.define) {
layui.define('jquery', function (exports) { //layui加载
exports('fullPage', factory(layui.jquery, global, global.document, global.Math));
});
仅需2行代码搞定

不过我们下载Echart源码版代码后发现,它的判断如下
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.echarts = {})));
}(this, (function (exports) { 'use strict';
是2个三元运算符,需要添加一行代码,如下
window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) :
添加后完整代码如下
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) :
(factory((global.echarts = {})));
}(this, (function (exports) { 'use strict';
我们现在开始使用插件
layui.use(['jquery','echarts'], function () {
var $ = layui.$;
//记得这是dom对象不是JQ对象,需要转换
echarts = layui.echarts.init($('#main')[0]);

//获取地图数据
$.get("data/pieData.json",
function (option) {
//初始化地图
echarts.setOption(option);
}
)
运行会发现报错
Uncaught TypeError: Cannot read property 'init' of undefined
我们控制台打印 layui.echarts会发现是undefined,这里我们打开Echart源码,最末加上一句话
exports.Axis = Axis;
exports.env = env$1;
exports.parseGeoJson = parseGeoJson;
return exports;
})));
这里最重要的一点就是要把exports return出来,才能被发现
回帖
本帖已设置禁止回复