EChart-Json戻り値に基づいてBar図を生成
7841 ワード
Json結果セットに基づいてBar図を生成する、第1列は記述として固定され、後の列は値フィールドとする.
<!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>