• 解决ECharts Can't get dom width or height!无法初始化图表的问题


    在使用Echarts做数据统计图表时,发现页面没有展示任何图表,只在控制台看到了

    echarts.js:1730 Can't get dom width or height
    

    猜测原因可能是执行init()方法时报错,无法获取到div的宽高才导致绘制失败。

    解决办法代码在两条星号之间:

    **************************************************************************************************************
                    // 柱状图
                    var dom = document.getElementById("container");
    
                    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
                    var resizeMainContainer = function () {
    		   mainContainer.style.width = window.innerWidth+'px';
    		   mainContainer.style.height = window.innerHeight*0.8+'px';
                    };
                    //设置div容器高宽
                    resizeMainContainer();
                    // 初始化图表
                    var myChart = echarts.init(dom);
    
                    $(window).on('resize',function(){
                        resizeMainContainer();
                        myChart.resize();
                    });
    
    **************************************************************************************************************
    
                    var app = {};
                    option = null;
                    option = {
                        xAxis: {
                            type: 'category',
                            data:  ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: mycars,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: function(params){
                                        var colorList = ["#37A2DA"];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }
                        }]
                    };
    
    
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
    

    但是,浏览器的控制台里面还是有警告显示,但是图表已经能够在页面上面显示了。

    估计想要去掉警告得修改一下源码了或者研究一下源码的执行方式就可以去掉这个警告了。

  • 相关阅读:
    C++实现按1的个数排序
    杨绛100岁感言
    体验电影演员后的自白
    安装Leanote极客范的云笔记
    Linux下SonarQube代码质量平台的安装和使用方法
    前端开发利器VSCode
    苏州一日游 有惊无险!
    setuptools安装和错误解决
    Linux pip安装使用
    Linux平台安装MongoDB
  • 原文地址:https://www.cnblogs.com/myprogramer/p/12419329.html
Copyright © 2020-2023  润新知