echarts 不报错也不显示

青旅半醒 2022-12-17 07:17 304阅读 0赞

## 我的情况 ##

我这个页面有两个tab  
![在这里插入图片描述][2020102217003350.png_pic_center]  
我的图表在第二个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,所以具体的可能有些不一致,方法大概就是这样

[2020102217003350.png_pic_center]: /images/20221123/37fe05fb9c78424fa0994bd1841ada0b.png