echarts 初始化失敗問題。

dom

實例容器，一般是一個具有高寬的div元素。

注：如果div是隱藏的，ECharts 可能會獲取不到div的高寬導致初始化失敗，這時候可以明確指定div的style.width和style.height，或者在div顯示后手動調用 echartsInstance.resize 調整尺寸。

ECharts 3 中支持直接使用canvas元素作為容器，這樣繪制完圖表可以直接將 canvas 作為圖片應用到其它地方，例如在 WebGL 中作為貼圖，這跟使用 echartsInstance.getDataURL 生成圖片鏈接相比可以支持圖表的實時刷新。

官網api中寫的挺清楚的，一般在用到tab切換時，初始化失敗。

解決方案：

1、規定div 的width 與 height。（不可規定百分比）

缺點：不知客戶端分辨率，定死不是一個合理的解決方案。

2、動態生成div 的寬高。

var mainContainer = document.getElementById('main');
//用於使chart自適應高度和寬度,通過窗體高寬計算容器高寬
var resizeMainContainer = function () {
    mainContainer.style.width = window.innerWidth*0.8+'px';
    mainContainer.style.height = window.innerHeight*0.3+'px';
};
//設置div容器高寬
resizeMainContainer();
// 初始化圖表
var mainChart = echarts.init(mainContainer);
$(window).on('resize',function(){//
    //屏幕大小自適應，重置容器高寬
    resizeMainContainer();
    mainChart.resize();
});

 

1

var mainContainer = document.getElementById('main');

2

//用於使chart自適應高度和寬度,通過窗體高寬計算容器高寬

3

var resizeMainContainer = function () {

4

    mainContainer.style.width = window.innerWidth*0.8+'px';

5

    mainContainer.style.height = window.innerHeight*0.3+'px';

6

};

7

//設置div容器高寬

8

resizeMainContainer();

9

// 初始化圖表

10

var mainChart = echarts.init(mainContainer);

11

$(window).on('resize',function(){//

12

    //屏幕大小自適應，重置容器高寬

13

    resizeMainContainer();

14

    mainChart.resize();

15

});

來自為知筆記(Wiz)