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

最新推荐文章于 2023-09-14 09:42:32 发布

immmmmmmmmm

最新推荐文章于 2023-09-14 09:42:32 发布

阅读量1.7k

点赞数

文章标签： echarts angular1

本文链接：https://blog.csdn.net/dhsdfr/article/details/83655812

版权

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在任何页面下不需要刷新，从而可以自适应页面宽度。