echarts动态生成条形图
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<body>
<div id="chartmain" style="width: 600px; height: 400px;"></div>
</body>
<script type="text/javascript">
function fuzhi(){
//X轴的名字
var name=[];
//Y轴的年龄值
var age=[];
$.ajax({
contentType : "application/json",
type : "GET",
url : "info.html",
dataType : "json",
success : function(data) {
for(var i=0;i<data.length;i++){
name[i]=data[i].username;
}
for(var i=0;i<data.length;i++){
age[i]=data[i].age;
}
option = {
color: [#3398DB],
tooltip : {
trigger: axis,
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : shadow // 默认为直线，可选为：line | shadow
}
},
grid: {
left: 3%,
right: 4%,
bottom: 3%,
containLabel: true
},
xAxis : [
{
type : category,
data : name,
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : value
}
],
series : [
{
name:年龄,
type:bar,
barWidth: 60%,
data:age
}
]
};
myChart.setOption(option);
}
});
var myChart = echarts.init(document.getElementById(chartmain));
}
fuzhi();
</script>
</html>
