Echarts display:none 图表不正常显示

最新推荐文章于 2024-04-03 06:17:57 发布

blueTou

最新推荐文章于 2024-04-03 06:17:57 发布

阅读量786

点赞数

CC 4.0 BY-SA版权

分类专栏：数据可视化

本文链接：https://blog.youkuaiyun.com/tangrp/article/details/100067915

数据可视化专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Angular应用中使用ECharts实现图表的动态更新与响应式布局，包括初始化图表实例、监听窗口大小变化并调整图表尺寸，以及通过导航切换触发图表重新加载的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var homeItem = echarts.init(document.getElementById('home-item'))
var profileItem = echarts.init(document.getElementById('profile-item'))
var messagesItem = echarts.init(document.getElementById('messages-item'))
var echartApp = angular.module('echartApp', []);
window.onresize = function (ev) {
    $('.item').css({width:$('.tab-content').width()})
    homeItem.resize();
    profileItem.resize();
    messagesItem.resize();
}



      /**
     * nav切换
     * @param type
     */
   $scope.onChangeTab=function (type) {
       switch (type){
           case 'home':{
               $('.item').css({width:$('.tab-content').width()})
               homeItem = echarts.init(document.getElementById('home-item'));
               homeItem.resize();
           }break;
           case 'profile':{
               $('.item').css({width:$('.tab-content').width()})
               // profileItem = echarts.init(document.getElementById('profile-item'))
               profileItem.resize();
           }break;
           case 'messages':{
               $('.item').css({width:$('.tab-content').width()})
               // messagesItem = echarts.init(document.getElementById('messages-item'))
               messagesItem.resize();
           }break;
           case 'settings':{

           }break;
       }
   }


$(window).resize(function(){
    $('.item').css({width:$('.tab-content').width()})
    homeItem.resize();
    profileItem.resize();
    messagesItem.resize();
})
 $(window).trigger('resize')