Layui引入Echarts

Layui引入Echarts_第1张图片

准备Layui必备文件、HTML页面

Layui引入Echarts_第2张图片

引入Layui css js文件

Layui引入Echarts_第3张图片

Echarts官网下载js文件

地址:https://echarts.apache.org/zh/download.html

选择方式三-在线定制,勾选需要的功能模块

不要下载最新版本,Layui可能不兼容,这里用的4.0,不要勾选压缩代码,后面需要修改js

点击下载,echarts.js文件引入到项目中
Layui引入Echarts_第4张图片

修改echarts.js代码

开头加入

window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) : 

在这里插入图片描述
结尾加入

exports.parseGeoJson = parseGeoJson;
return exports;

Layui引入Echarts_第5张图片
保存关闭

准备div容器,Layui加载echarts

Layui引入Echarts_第6张图片

echarts初始化、配置、加载配置并显示

这里需要使用DOM操作

如果没成功可以换个echarts版本尝试

注意事项

如果layui页面中有html页面嵌套时,首页index.html引入layui.config({…

你可能感兴趣的:(前端,javascript,html,layui)