echart读取数据库数据画柱状图

var xAxisData = [];
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 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);

你可能感兴趣的:(前端页面设计)