echart讀取資料庫資料畫柱狀圖
var legendData = ['chenrui'];
var dataList = [];
var echartdata,dat;
$.ajax({
async : false,
// cache : false,
type : 'POST',
dataType:'json',
url : 'ksxlfmxController.do?queryKsSum',// 請求的action路徑
error : function() {// 請求失敗處理函式
},
success : function(data) {
echartdata = data.msg;
// console.log(echartdata);
}
});
dat = JSON.parse(echartdata);
console.log(dat);
for(var i=0; i<dat.length;i++){
xAxisData.push(dat[i].ks);
dataList.push(dat[i].result);
}
console.log("xAxisData: "+xAxisData);
console.log("xAxisData length: "+xAxisData.length);
console.log("dataList: "+dataList);
console.log("dataList length: "+dataList.length);
// dataList = [][];
var option = {
tooltip: {
// trigger: 'axis'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: legendData
},
toolbox: {
show : true,
//orient: 'vertical',
x: 'left',
y: 'top',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataZoom: [{
type: 'slider',
start: 50,
end: 70
}, {
type: 'inside',
start: 50,
end: 70
}],
xAxis: {
data: xAxisData
},
yAxis: {},
// series: echarts.util.map(dataList, function (data, index) {
// return {
// type: 'bar',
// animation: false,
// name: legendData[index],
// stack:'1',
// itemStyle: {
// normal: {
// opacity: 1
// }
// },
// data: data
// };
// })
series:[{
name:'chenrui',
type:'bar',
data:dataList
}
]
};
var myChart = echarts.init(document.getElementById('aaa'));
myChart.setOption(option);