ECharts 教程 基礎篇
ECharts資料可視化實驗室，解讀适合使用場景
官網
- 項目簡介：ECharts 是一款由百度前端技術部開發的，基于 Javascript 的資料可視化圖表庫，提供直覺，生動，可互動，可個性化定制的資料可視化圖表。涵蓋各行業圖表，滿足各種需求。
- 項目位址：https://gitee.com/echarts/echarts
現在公司剛配置設定一個任務，需要用到 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>
![Java擷取漢字對應的拼音(全拼或首字母)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)