Layui集成Echarts,并在Layui轮播组件中实现Echarts多图表自适应

Layui集成Echarts,并在Layui轮播组件中实现Echarts多图表自适应
实现效果如 Layui模板 中的数据概览多图表自适应

一、Layui集成Echarts的配置
1.页面引入Echart.js

layui.config({
	    version: 1,
	    base: "<c:url value='/template/lead_into/js/'/>" //Echart.js所在的文件夹
	}).use(['element', 'echarts'], function() {
		var element = layui.element,
		$ = layui.jquery,
		echarts = layui.echarts;
		//在这里写Echarts的代码
});     

2.Echart.js配置Layui
需要在开始位置添加

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) : factory(global.echarts = {});
  
})(this, function (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) {

js最后结束位置需要添加 return exports;

  exports.env = env;
  exports.List = List;
  exports.Model = Model;
  exports.Axis = Axis;
  exports.innerDrawElementOnCanvas = brushSingle;
  return exports;
});

二、使用Layui新增Echarts图表
1.单图表集成方法并支持自适应

layui.config({
	    version: 1,
	    base: "<c:url value='/template/lead_into/js/'/>" //Echart.js所在的文件夹
	}).use(['element', 'echarts'], function() {
		var element = layui.element,
		$ = layui.jquery,
		echarts = layui.echarts;
		var myChart01Dom = document.getElementById('VisualizationZhe');
		myChart01 = echarts.init(myChart01Dom);
		//指定图表配置项和数据
	    var optionchart = {
	   		title: {
   		        left: 'center',
   		        text: '今日流量趋势',
	   		},
    		xAxis: {
    	        type: 'category',
    	        boundaryGap: false,
    	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    	    },
    	    yAxis: {
    	        type: 'value'
    	    },
    	    series: [{
    	        data: [0,2500,3000,10000,8888,5600,1006],
    	        type: 'line',
    	        smooth: true,
    	        areaStyle: {}
    	    }]
	    };
	    myChart01.setOption(optionchart, true);
	    //单图时自适应
	    //window.onresize = chartZhu.resize;
	});

PS: 单图表时直接在最后加**window.onresize = chartZhu.resize;**即可
2.多图表集成自适应

//多图时自适应
 window.addEventListener("resize", function () {
	myChart01.resize();
    myChart02.resize();
});

三、Layui轮播组件中实现多图表自适应
实现效果如 Layui模板 中的数据概览多图表自适应


很简单,只需要监听轮播组件的轮播事件即可,即切换时重置Echarts图表

//监听轮播切换事件
	carousel.on('change(LAY-index-dataview)', function(obj){ //对应lay-filter
	    myChart01.resize();
	    myChart02.resize();
	 });

HTML代码

<div id="index_carousel_style2" class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                  <div carousel-item id="LAY-index-dataview">
                     <div id="VisualizationZhe"></div>   
                     <div id="VisualizationBing"></div>
                  </div> 
                </div>

PS轮播组件无需点击,悬浮跳转的配置 trigger : 'mouseover’

//建造实例
  carousel.render({
    elem: '#index_carousel_style2'
    ,width: '100%' //设置容器宽度
    ,arrow: 'none' //切换箭头默认显示状态 hover（悬停显示）always（始终显示）none（始终不显示）
    ,anim: 'fade' //切换动画方式
    ,indicator : 'inside'	//指示器位置，可选值为：inside（容器内部）outside（容器外部）none（不显示）
    ,autoplay : false	//自动切换
    ,trigger : 'mouseover'	//无需点击 悬浮跳转   click 需要点击
  });