ECharts柱狀圖實例
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>柱狀圖</title>
<script type="text/javascript" src="echartsjs/echarts.min.js"></script>
</head>
<body>
<div id="main" style="height:300px;width: 350px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
//*****I do it start********************
var list = new Array();//前臺固定數據。可以通過ajax等方式獲取後臺查詢數據。
list = [
{"course":"語文","score":"5"},
{"course":"數學","score":"20"},
{"course":"外語","score":"36"},
{"course":"音樂","score":"10"},
{"course":"體育","score":"10"},
{"course":"美術","score":"20"}
];
var course = new Array();//聲明數組存儲課程
var score = new Array();//聲明數組存儲分數
//遍歷list存儲數據
for ( var i = 0; i < list.length; i++) {
course[i] = list[i].course;
score[i] = list[i].score;
}
//alert(course);
//alert(score);
//*****I do it end**********************
// 指定圖表的配置項和數據
var option = {
title: {
text: '成績統計_柱狀圖'
},
tooltip: {},
legend: {
data:['成績']
},
xAxis: {
data: course//數據填充
},
yAxis: {},
series: [{
name: '成績',
type: 'bar',
data: score//數據填充
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>效果圖：
