echarts 高度跟随数据长度自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" ></script>
</head>
<body>
<div id="main" style="width: 100%;"></div>
<script src="../test/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
how:true,
text: '┃趋势图',
left:70,
},
toolbox:{
show:true,
feature:{
dataView:{
show:true
},
restore:{
show:true
},
dataZoom:{
show:true
},
saveAsImage:{
show:true
},
magicType:{
type:['bar','line']
}
}
},
tooltip: {
trigger:'axis'
},
legend: {
data:['评论量(QTY)']
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
axisLabel:{
interval: 0,
rotate: 0
},
data:["00:00","03:00","06:00","09:00","12:00","15:00","18:00","21:00","06:00","09:00","12:00","15:00","18:00","21:00","06:00","09:00","12:00","15:00","18:00","21:00","09:00","12:00","15:00","18:00"]
},
series: [{
name: '评论量(QTY)',
type: 'bar',
data: [15, 20, 25, 18, 17, 21,12,18,10,11,14,16,19,30,15, 20, 25, 18, 17, 21,18,10,11,14,],
barWidth:30,
markPoint:{
data:[
{type:'max',name:'最大值',symbolSize:'35'},
{type:'min',name:'最小值',symbolSize:'35'}
]
},
itemStyle:{
normal:{
color:'#5CACEE'
}
},
markLine:{
data:[
{type:'average', name:'平均值'}
]
}
}]
};
myChart.setOption(option);
var autoHeight = option.yAxis.data.length * 50 + 150;
myChart.getDom().style.height = this.autoHeight + "px";
myChart.getDom().childNodes[0].style.height = this.autoHeight + "px";
myChart.getDom().childNodes[0].childNodes[0].setAttribute("height", this.autoHeight);
myChart.getDom().childNodes[0].childNodes[0].style.height = this.autoHeight + "px";
myChart.resize();
</script>
</body>
</html>