• 解决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);
                    }
    

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

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

  • 相关阅读:
    Asp.Net页面传值的方法简单总结【原创】
    .Net架构必备工具列表
    .Net架构必备工具列表
    .Net架构必备工具列表
    C#中几种循环语法的比较
    【UVA 437】The Tower of Babylon(拓扑排序+DP,做法)
    【UVA 437】The Tower of Babylon(记忆化搜索写法)
    【uva 1025】A Spy in the Metro
    【codeforces 538E】Demiurges Play Again
    【Codeforces Beta Round #45 D】Permutations
  • 原文地址:https://www.cnblogs.com/myprogramer/p/12419329.html
Copyright © 2020-2023  润新知