关于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();
});