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;ifor (var i=0;i'#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>