echarts 不报错 也不显示

我的情况

我这个页面有两个tab
在这里插入图片描述
我的图表在第二个tab 所以页面第一次加载渲染的时候是不会渲染承载图表的那个div的
所以 js里面echarts初始化的代码就初始不了

解决方法

我先检测是否点击切换到第二个tab,点击切换到说明div渲染好了,然后再运行echarts初始化

	    element.render();
	    
	    element.on('tab(component-tabs-brief)', function(obj){
	        //layer.msg(obj.index + ':' + this.innerHTML);
	        if (obj.index==1) {
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
				    color: ['#3398DB'],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
				            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value'
				        }
				    ],
				    series: [
				        {
				            name: '直接访问',
				            type: 'bar',
				            barWidth: '60%',
				            data: [10, 52, 200, 334, 390, 330, 220]
				        }
				    ]
				};
				;
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
	        } else {

	        }
	    });

我的是layui,所以具体的可能有些不一致,方法大概就是这样


版权声明:本文为qq_35510729原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。