Echarts 图表宽度高度自适应解决方案

1，宽度

 

var domBarOrganization = document.getElementById("containerbarorganization");
var myChartBarOrganization = echarts.init(domBarOrganization);
var app = {};
optionbarorganization = null;
/*app.title = '坐标轴刻度与标签对齐';*/



var labelsBarOrganization = [];
var datasBarOrganization =[];
$.ajax({
    //几个参数需要注意一下
    type: "POST",//方法类型
    dataType: "json",//预期服务器返回的数据类型
    url: "***********" ,//url
    success: function (data) {
        for(var i=0;i<data.listOrganizationType.length;i++){
            var da = data.listOrganizationType[i];
            labelsBarOrganization.push(da.name);
            datasBarOrganization.push(da.number);
        }



        optionbarorganization = {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : labelsBarOrganization,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel : {//坐标轴刻度标签的相关设置。
                        interval:0,
                        rotate:"45"
                        /*interval: 0,
                        formatter:function(value)
                        {
                            return value.split("").join("\n");
                        }*/
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'证书条数（条）',
                    type:'bar',
                    barWidth: '60%',
                    data:datasBarOrganization
                }
            ]
        };
        if (optionbarorganization && typeof optionbarorganization === "object") {
            window.onresize = myChartBarOrganization.resize;//主要这里
            myChartBarOrganization.setOption(optionbarorganization, true);
        }




    },
    error : function() {
        Power.dialog.alertError("请求异常！");
    }
});

如果多个图表 ：myChartBarOrganization不同即可


2、如果根据柱形柱子多少计算宽度或者高度

//dataOrganization3  数据条数（柱子个数）
 window.onresize = myChartOrganization.resize;
this.autoHeight = dataOrganization3 * 50 + 50; // counst.length为柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
 myChartOrganization.getDom().style.height = this.autoHeight + "px";
 myChartOrganization.getDom().childNodes[0].style.height = this.autoHeight + "px";

myChartOrganization.resize();
myChartOrganization.setOption(option1, true);

这样就可以缩小浏览器或者自适应了