echarts 初始化失敗問題。

dom

實例容器，通常是一個具備高寬的div元素。

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

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

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

解決方案：

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

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

二、動態生成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)