1.在html中准备一个div作为图形容器，需具备大小
<div id="second" style="height:400px;width: 550px;float:left"></div>
2.柱状图模型
<script type="text/javascript">
var myChart2 = echarts.init(document.getElementById('second'));
myChart2.showLoading();
myChart2.setOption({
title:{ text:'分布图' //标题 },
xAxis:{ data:[] },
yAxis:{ type : 'value',//默认为值类型
splitLine:{ show:true } },
series:[] });
//实现点击某按钮显示图形
$("select#mytype").click(function(){
//给柱形图赋值
$.ajax({ type: 'POST',
url: "datashow/xy",
cache : false, //禁用缓存
dataType: "json",
success: function(data) {
//编辑组织数据，这里后台返回的data格式为{'categ': ['男', '女'], 'data': [[2, 136, 38, 4, 1, 0], [3, 75, 25, 5, 1, 0]], 'name': ['青少年', '青年人', '中年人', '老年前期', '老年人', '长寿老人']}
var series=[];
for (var i=0;i<data.data.length;i++){
var item={
name:data.categ[i],
data:data.data[i],
type:'bar',
label: { normal: { show: true, position: 'top' } }
};
series.push(item); }
//将数据加载到图形中
myChart2.setOption({
title: {
text: data.title,
textStyle: {fontSize: 14}
},
legend: {
data: data.categ,
left: 'right'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
xAxis: {
type: 'category',
data: data.name,
axisLabel: {interval: 0} //x轴数据显示完整
},
yAxis: {name: '人'},
series: series
},true);
</script>
3.结果
