關於echart 圖表自適應問題的解決辦法

 <div id="divEnergy" style="width: 100%; height: 300px; border: 5px solid red; ">
 </div>

以上給echart 一個百分比的寬度  想達到自適應的效果

當頁面沒有加載完，進行tab 切換的時候 ，表格變成如下效果

 解決辦法

  $.ajax({
                                type: "post",
                                async: false, //同步執行  
                                url: "getjson/GetChartDatasale.ashx?type=月&userid=" + document.getElementById("<%=hiduserid.ClientID %>").value,
                                dataType: "json", //返回數據形式為json  
                                success: function (result) {
                                    if (result.status = 200) {
                                        //將返回的category和series對象賦值給options對象內的category和series  
                                        //因為xAxis是一個數組 這里需要是xAxis[i]的形式  
                                        options.xAxis[0].data = result.category;
                                        options.series = result.series;
                                        options.legend.data = result.legend;
                                        // options.title.text = "fdsa";
                                        myEnergyChart.setOption(options);
                                        myEnergyChart.refresh();

                                        /* 7-28修復折線圖無法自適應的問題*/
                                        window.onresize = myEnergyChart.resize;
                                    }
                                },
                                error: function (errorMsg) {
                                    //alert("圖表數據加載失敗！");
                                }
                            });

　　

官方文檔如下：

ECharts沒有綁定resize事件，顯示區域大小發生改變內部並不知道，使用方可以根據自己的需求綁定關心的事件，主動調用resize達到自適應的效果，常見如window.onresize = myChart.resize。

注意：

如果這個頁面有多個圖表：

//多圖表自適應
window.addEventListener("resize", function () {
myEnergyChart.resize();
myEnergyChart2.resize();
});