現在公司剛分配一個任務，需要用到echarts，以前也沒有接觸過，所以一邊學習ECharts官網上的中文API（http://echarts.baidu.com/examples.html）,然后一些細節部分如果沒有我就再搜各位前輩寫的代碼，總算將功能實現出來了，下面就是我的代碼以及最終效果圖。
<html>
<head>
<base href="<%=basePath%>">
<title>堆疊柱狀圖</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript"> //基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: '資源總覽', left:'20px', textStyle: { color: "#436EEE", fontSize: 17, } }, tooltip: { trigger: "axis", }, legend: { itemWidth:15, itemHeight:15, data:['可用','不可用'], }, xAxis: { data: ["網絡設備","服務器","應用","其他","虛擬機","存儲"], splitLine:{ show:false, }, }, yAxis: { splitLine:{ show:false, }, }, series: [{ name: '可用', type: 'bar', stack:'使用情況', data: [5, 20, 36, 10, 10, 20], itemStyle:{ normal:{color:"#FF8849"}, } },{ name: '不可用', type: 'bar', stack:'使用情況', data: [40, 22, 18, 35, 42, 40], itemStyle:{ normal:{color:"#3FBB49"}, } }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script>
</body>
</html>