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: '┃趋势图',
        // subtext:'测试',  //副标题
        left:70,
        // borderColor:'red',  //边框颜色
        // borderWidth:1,  //边框的宽度
 
      },
      //工具箱组件
      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 // 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);
//柱状图y轴的长度 option.yAxis.data.length
var autoHeight = option.yAxis.data.length * 50 + 150;
//获取 ECharts 实例容器的 dom 节点。
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>

 

posted @ 2019-03-12 10:42  静幻已空梦仍在  阅读(4006)  评论(1)    收藏  举报