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

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

笔记:在单页面编写的过程中,echarts在tab切换不显示。_第1张图片

那么我们使用从页面中获取到它每个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在任何页面下不需要刷新,从而可以自适应页面宽度。

你可能感兴趣的:(笔记:在单页面编写的过程中,echarts在tab切换不显示。)