解决方案是在切换时重新init 和setOption 图表
代码如下:本例是四个图标切换,第一个是单独的柱状图,其余3个是循环的折线图
<script> var foption1 = { title : { text : '图表标题', }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: {}, xAxis: { type: 'category', data: ["8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","1","2","3","4","5","6","7"], }, yAxis: { }, series: [ { name: '3月1日', type: 'bar', data: [11,13,15,17,19,22,11,13,15,17,19,22,11,13,15,17,19,22,19,22], }, ] }; var myChart1 = echarts.init(document.getElementById('barchart1'),theme); myChart1.setOption(foption1); ObjectResize(myChart1.resize) function ObjectResize(fn){ if(window.addEventListener) { window.addEventListener("resize",fn,false); } else { window.attachEvent("onresize",fn) } } var option2 = { title : { text : '图表标题', }, grid: {}, tooltip : { trigger : 'axis', //没有此触发,则下面的样式无效 }, xAxis: { type: 'category', data: ["8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","1","2","3","4","5","6","7"], }, yAxis: { }, series: [{ name: '用气量', type: 'line', //smooth:true, data: [65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56, 65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56], }, ] }; for (var i=1; i<5; i++) { var myChart = echarts.init(document.getElementById('linechart'+i),theme); myChart.setOption(option2); ObjectResize(myChart.resize); } </script> 切换的js代码如下: function show(num){ //debugger; var odiv=document.getElementById("chartTabTitle").getElementsByTagName("li"); var ocentent=document.getElementById("chartTabCentent").getElementsByTagName("li"); for(var i=0;i<odiv.length; i++){ if(i==num){ odiv[i].className="now" ocentent[i].style.display="block";} else { odiv[i].className="" ocentent[i].style.display="none";} } //window['myChart' +num].setOption(window['option' +num]); var myChart1 = echarts.init(document.getElementById('barchart1'),theme); myChart1.setOption(foption1); ObjectResize(myChart1.resize) var charti =echarts.init(document.getElementById('linechart'+num),theme); //charti.setOption(window['option' +num]); charti.setOption(option2); ObjectResize(charti.resize); }