根據Json結果集生成Bar圖, 第一列固定為描述, 后面的列為值字段.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="height:600px"></div>
<!-- ECharts單文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
/*
var json_data = [{"title":"襯衫","value":5,"value1":15},{"title":"羊毛衫","value":15,"value1":15},{"title":"雪紡衫","value":25,"value1":25}
,{"title":"褲子","value":45,"value1":15},{"title":"高跟鞋","value":15,"value1":25},{"title":"襪子","value":15,"value1":25}];
*/
var json_data = [{"title":"襯衫","value":5,"value1":15,"value2":15},{"title":"羊毛衫","value":15,"value1":15,"value2":15}
,{"title":"雪紡衫","value":25,"value1":25,"value2":15},{"title":"褲子","value":45,"value1":15,"value2":15}
,{"title":"高跟鞋","value":15,"value1":25,"value2":15},{"title":"襪子","value":15,"value1":25,"value2":15}];
var col_title = ""; //標題的列名,固定為第一列
var col_data = [] ; // 從第二列開始, 為值字段 , ["value","value1"];
var col_data_name =[]; // 從第二列開始, 為值字段 , ["銷量","值二"];
var chart_title =new Array(); //標題婁組
var chart_data = new Array(); //值數組
//列標題,列字段名取值
var col = 0;
for(var key in json_data[0]){
if(col==0)
col_title = key;
else
{
col_data.push(key);
col_data_name.push(key);
}
col++;
}
//給值字段賦值
for(var i =0;i<col_data.length;i++){
chart_data[i] = {
"name": col_data_name[i],
"type":"bar",
"data": [] //[5, 20, 40, 10, 10, 20]
};
}
//填入標題及各值的數據
for(var i=0;i<json_data.length;i++){
chart_title.push(json_data[i]["title"]);
for(var j =0;j<col_data.length;j++){
var col_name = col_data[j];
chart_data[j].data.push(json_data[i][col_name]);
//chart_data[1].data.push(json_data[i]["value1"]);
};
};
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基於准備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data: col_data_name
},
xAxis : [
{
type : 'category',
data : chart_title //["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : chart_data
};
// 為echarts對象加載數據
myChart.setOption(option);
}
);
</script>
</body>