笔记：在单页面编写的过程中，echarts在tab切换不显示。

原创于 2018-11-02 15:25:08 发布 · 1.7k 阅读

CC 4.0 BY-SA版权

文章标签：

本文探讨了在AngularJS项目中，如何解决ECharts在Tab标签切换时因DOM元素未就绪导致的图表无法正常生成的问题。通过监听Tab切换事件，动态更新图表配置，并利用$timeout确保DOM更新后再初始化ECharts，实现图表的动态加载与重绘。

echarts在tab标签切换中，因为获取不到div中的id造成echarts无法生成。

那么我们使用从页面中获取到它每个tab标签里的值。

而我这里是在div中ng-show="selectItemKey==1"，然后当我使用点击某个标签来进行页面的渲染，当我点击某一个标签的时候我只启用当前标签的echarts。

$scope.changeTab = function (key) {
            $scope.selectItemKey = key;
            if (key == 1) {
                $('.class名')[0].innerHTML = '强度指标';
            };
            if (key == 2) {
                $('.class名')[0].innerHTML = '经济指标';
                $timeout(function () {
                   ........
                }, 500)
                $timeout(function () {
                    $(window).resize(function () {
                        echarts1.resize();
                        echarts2.resize();
                        echarts3.resize();
                        echarts4.resize();
                    })
                }, 500)
            };
};

最后的resize()是用来进行图表重绘，让echarts在任何页面下不需要刷新，从而可以自适应页面宽度。