echarts 初始化失败问题。

Posted 2020-10-20 QGuo

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)