Layui引入Echarts_layui echarts-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47257749/article/details/111147015

本文介绍了如何在Layui项目中引入和使用Echarts。首先，准备Layui和Echarts的必要文件，从Echarts官网下载4.0版本的js文件，避免与Layui不兼容。接着，需要修改echarts.js的代码，添加特定的引用。然后，在HTML页面创建div容器，并使用Layui进行echarts的初始化和配置。在实际操作中，如果遇到问题，可以尝试更换Echarts的版本。最后，给出了在layui页面嵌套情况下避免引入冲突的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

准备Layui必备文件、HTML页面

在这里插入图片描述

引入Layui css js文件

在这里插入图片描述

Echarts官网下载js文件

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

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

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

点击下载，echarts.js文件引入到项目中
在这里插入图片描述

修改echarts.js代码

开头加入

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

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

exports.parseGeoJson = parseGeoJson;
return exports;

在这里插入图片描述
保存关闭

准备div容器，Layui加载echarts

在这里插入图片描述

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

这里需要使用DOM操作

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

注意事项

如果layui页面中有html页面嵌套时，首页index.html引入layui.config({…}).extend({…})即可，子页面直接通过layui.use([…])使用，首页面和子页面都不再需要引入< script src=“echarts.js” >
如果两个同时引入可能引发冲突

<script>
			layui.config({
				base: '/module/'
			}).extend({
				echarts: 'echarts/echarts'
			}).use(['echarts','element','layer'], function () {			
				var element = layui.element;
				var $ = layui.jquery;
				var echarts = layui.echarts;
				
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));
				// 指定图表的配置项和数据
				var option = {
				    title: {
				        text: '堆叠区域图'
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            label: {
				                backgroundColor: '#6a7985'
				            }
				        }
				    },
				    legend: {
				        data: ['搜索引擎']
				    },
				    toolbox: {
				        feature: {
				            saveAsImage: {}
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: [
				        {
				            type: 'category',
				            boundaryGap: false,
				            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value'
				        }
				    ],
				    series: [
				        {
				            name: '搜索引擎',
				            type: 'line',
				            stack: '总量',
				            label: {
				                normal: {
				                    show: true,
				                    position: 'top'
				                }
				            },
				            areaStyle: {},
				            data: [820, 932, 901, 934, 1290, 1330, 1320]
				        }
				    ]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			});	
		</script>