echarts 高度跟隨數據長度自適應

本文轉載自查看原文 2019-03-12 10:42 2068 html

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Echarts的水平柱狀圖固定高度自適應問題 GridView的高度自適應 swiper高度自適應 css高度自適應 iframe高度自適應 echarts圖表的自適應 textarea如何實現高度自適應？ iview table 自適應高度 iframe高度自適應的方法 iOS UITableViewableViewCell自適應高度