如果设置了宽度100%，在初始化的时候echarts图表正常显示，但在点击tab切换的时候，发现宽度变为了100px，
主要原因的当前的元素被隐藏了，但是echarts实例还存在 ，
解决办法是：在点击tab切换的时候，先把所有的echarts实例给销毁掉 myChart.dispose();，再给当前显示的元素，调用echarts数据。全部的代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {margin: 0;}* {box-sizing: border-box;}ul {margin: 0;padding: 0;font-size: 0;}li {font-size: 14px;padding: 10px;width: 33.33%;display: inline-block;vertical-align: top;list-style: none;text-align: center;cursor: pointer;}li.active {background: #fff;}.wrapper {background: #ccc;}.inner {max-width: 800px;margin: 0 auto;padding: 0 20px;}.item {width: 100%;height: 200px;display: none;background: #fff;}.item.active {display: block;}</style></head><body><div class="wrapper"><div class="inner"><ul><li class="active">图表1</li><li>图表2</li><li>图表3</li></ul><div class="box"><div class="item active"><div id="item1" style="width: 100%;height: 100%;"></div></div><div class="item"><div id="item2" style="width: 100%;height: 100%;"></div></div><div class="item"><div id="item3" style="width: 100%;height: 100%;"></div></div></div></div></div><script src="../jquery.js"></script><script src="echarts.min.js"></script><script>var myChart; // 定义全局变量来接收echarts实例function render(dom) {myChart = echarts.init(document.getElementById(dom));var option = {// 图例组件。// legend: {//// show:false// },grid: {left: 0, //grid 组件离容器左侧的距离。// top:0,right: 0,bottom: 0},tooltip: { //提示框组件。trigger: 'axis'},xAxis: {show: false, // 是否显示 x 轴。data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],boundaryGap: false //坐标轴两边留白策略},yAxis: {show: false, // 是否显示 y 轴。splitLine: {show: false //坐标轴在 grid 区域中的分隔线。}},series: [{name: '销量',type: 'line',data: [820, 932, 901, 934, 1290, 1330, 1320],areaStyle: { //区域填充样式。// color:'#8c617a'normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#8ec6ad'}, {offset: 1,color: '#fff'}])}},itemStyle: { //折线拐点标志的样式。color: '#8ec6ad'},lineStyle: { //线条样式。color: '#8ec6ad',shadowColor: '#8ec6ad',shadowBlur: 20// width:1},emphasis: {label: {show: true}},// smooth:true, //是否平滑曲线显示。symbol: 'none' //标记的图形。// label:{ //图形上的文本标签//show:true// }}]}myChart.setOption(option);$(window).on('resize', function () { //屏幕大小自适应，重置容器高宽myChart.resize();});}render('item1'); //初始化图表//tab栏切换$("li").on('click', function () { myChart.dispose(); //销毁所有实例var index = $(this).index();$(this).addClass("active").siblings("li").removeClass("active");$(".box .item:eq(" + index + ")").addClass("active").siblings(".item").removeClass("active");//给当前显示容器渲染图表if (index == '0') {render('item1');} else if (index == '1') {render('item2');} else if (index == '2') {render('item3');}});</script></body></html>
