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);
这样就可以缩小浏览器或者自适应了