bootstrap柱狀圖

<div class="layui-col-md6">
	<div class="layui-card">
			<div class="layui-card-header">併網時間及容量統計</div>
			<div class="layui-card-body" id="bar1"></div>
	</div>	
</div>

var option = {
		  // ----  標題 -----
		  title: {
		    text: '',
		    textStyle: {
		      color: 'red'
		    },
		    subtext: '',
		    subtextStyle: {
		      color: 'blue'
		    },
		    padding: [0, 0, 10, 100]  // 位置
		  },
		  // ---- legend ----
		  legend: {
		    type: 'plain',  // 圖列類型，默認爲 'plain'
		    top: '1%',  // 圖列相對容器的位置 top\bottom\left\right
		    selected: {
		      // '銷量': true  // 圖列選擇，圖形加載出來會顯示選擇的圖列，默認爲true
		    },
		    textStyle: {  // 圖列內容樣式
		      color: '#fff',  // 字體顏色
		      backgroundColor: 'black'  // 字體背景色
		    },
		    tooltip: {  // 圖列提示框，默認不顯示
		      show: true,
		      color: 'red'  
		    },
		    data: [   // 圖列內容
		      {
		        name: '',
		        icon: 'circle',
		        textStyle: {
		          color: 'red',  // 單獨設置某一個圖列的顏色
		          backgroundColor: '#fff' // 單獨設置某一個圖列的字體背景色
		        }
		      }
		    ] 
		  },
		  // ---  提示框 ----
		  tooltip: {
		    show: true,   // 是否顯示提示框，默認爲true
		    trigger: 'item', // 數據項圖形觸發
		    axisPointer: {   // 指示樣式
		      type: 'shadow',
		      axis: 'auto'
		    },
		    padding: 5,
		    textStyle: {   // 提示框內容的樣式
		      color: '#fff'  
		    }
		  },
		  // ---- gird區域 ---
		  gird: {
		    show: false,    // 是否顯示直角座標系網格
		    top: 80,  // 相對位置 top\bottom\left\right
		    containLabel: false, // gird 區域是否包含座標軸的刻度標籤
		    tooltip: {
		      show: true,
		      trigger: 'item',   // 觸發類型
		      textStyle: {
		        color: '#666'
		      }
		    }
		  },
		  //  ------  X軸 ------
		  xAxis: {
		    show: true,  // 是否顯示
		    position: 'bottom',  // x軸的位置
		    offset: 0, // x軸相對於默認位置的偏移
		    type: 'category',   // 軸類型， 默認爲 'category'
		    name: '年份',    // 軸名稱
		    nameLocation: 'end',  // 軸名稱相對位置
		    nameTextStyle: {   // 座標軸名稱樣式
		      color: 'black',
		      padding: [5, 0, 0, -5]
		    },
		    nameGap: 15, // 座標軸名稱與軸線之間的距離
		    nameRotate: 0,  // 座標軸名字旋轉
		    axisLine: {       // 座標軸 軸線
		      show: true,  // 是否顯示
		      symbol: ['none', 'arrow'],  // 是否顯示軸線箭頭
		      symbolSize: [8, 8], // 箭頭大小
		      symbolOffset: [0, 7],  // 箭頭位置
		      // ------   線 ---------
		      lineStyle: {
		        color: 'balck',
		        width: 1,
		        type: 'solid'
		      }
		    },
		    axisTick: {    // 座標軸 刻度
		      show: true,  // 是否顯示
		      inside: true,  // 是否朝內
		      length: 3,     // 長度
		      lineStyle: {   // 默認取軸線的樣式
		        color: 'black',
		        width: 1,
		        type: 'solid'
		      }
		    },
		    axisLabel: {    // 座標軸標籤
		      show: true,  // 是否顯示
		      inside: false, // 是否朝內
		      rotate: 0, // 旋轉角度
		      margin: 5, // 刻度標籤與軸線之間的距離
		      color: 'black'  // 默認取軸線的顏色 
		    },
		    splitLine: {    // gird區域中的分割線
		      show: false,  // 是否顯示
		      lineStyle: {
		      }
		    },
		    splitArea: {    // 網格區域
		      show: false  // 是否顯示，默認爲false
		    },
		    data: [[${xlab}]]
		  },
		  //   ------   y軸  ----------
		  yAxis: {
		    show: true,  // 是否顯示
		    position: 'left', // y軸位置
		    offset: 0, // y軸相對於默認位置的偏移
		    type: 'value',  // 軸類型，默認爲 ‘category’
		    name: 'MW',   // 軸名稱
		    nameLocation: 'end', // 軸名稱相對位置value
		    nameTextStyle: {    // 座標軸名稱樣式
		      color: 'black',
		      padding: [5, 0, 0, 5]  // 座標軸名稱相對位置
		    },
		    nameGap: 15, // 座標軸名稱與軸線之間的距離
		    nameRotate: 360,  // 座標軸名字旋轉

		    axisLine: {    // 座標軸 軸線
		      show: true,  // 是否顯示
		      //  -----   箭頭 -----
		      symbol: ['none', 'arrow'],  // 是否顯示軸線箭頭
		      symbolSize: [8, 8],  // 箭頭大小
		      symbolOffset: [0, 7], // 箭頭位置

		      // ----- 線 -------
		      lineStyle: {
		        color: 'black',
		        width: 1,
		        type: 'solid'
		      }
		    },
		    axisTick: {      // 座標軸的刻度
		      show: true,    // 是否顯示
		      inside: true,  // 是否朝內
		      length: 3,      // 長度
		      lineStyle: {
		        color: 'black',  // 默認取軸線的顏色
		        width: 1,
		        type: 'solid'
		      }
		    },
		    axisLabel: {      // 座標軸的標籤
		      show: true,    // 是否顯示
		      inside: false,  // 是否朝內
		      rotate: 0,     // 旋轉角度
		      margin: 8,     // 刻度標籤與軸線之間的距離
		      color: 'black',  // 默認軸線的顏色
		    },
		    splitLine: {    // gird 區域中的分割線
		      show: true,   // 是否顯示
		      lineStyle: {
		        color: '#666',
		        width: 1,
		        type: 'dashed'
		      }
		    },
		    splitArea: {     // 網格區域
		      show: false   // 是否顯示，默認爲false
		    }
		  },
		  //  -------   內容數據 -------
		  series: [
		    {
		      name: '容量',      // 序列名稱
		      type: 'bar',      // 類型
		      legendHoverLink: true,  // 是否啓用圖列 hover 時的聯動高亮
		      label: {   // 圖形上的文本標籤
		        show: false,
		        position: 'insideTop', // 相對位置
		        rotate: 0,  // 旋轉角度
		        color: '#eee'
		      },
		      itemStyle: {    // 圖形的形狀
		        color: 'blue',
		        barBorderRadius: [18, 18, 0 ,0]
		      },
		      barWidth: '50%',  // 柱形的寬度
		      barCategoryGap: '20%',  // 柱形的間距
		      data: [[${ylab}]]
		    }
		  ]
		};
var bar = document.getElementById('bar1');
bar.style.height = tempheight+50+'px';;
var barChart = echarts.init(bar);
barChart.setOption(option);

window.onresize = function(){	
    barChart.resize(); 
}