加载柱状图
第一步,获取数据转换为数组
第二步 设置option初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
第三部,数组数据加载到option;
第四部 为echarts对象加载数据
myChart.setOption(option);
Echarts案列:http://echarts.baidu.com/echarts2/doc/example
Echarts文档说明:http://echarts.baidu.com/echarts2/doc
<div id="main" style="width:1000px;height:800px">
<script src="~/Content/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="~/Content/lib/echarts/echarts.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "/Report/PopulationBar",
type: "POST",
success: function (data) {
var compony = [];
var man = [];
var woman = [];
var m=0;
var w=0;
for (var i = 0; i < data.length; i++) {
//第一步,获取数据转换为数组
if (data[i].GESCHTXT=="男"){
man[m]=data[i].数量; //男的数量加载到数组中
m++;
}
if (data[i].GESCHTXT=="女"){
woman[w] = data[i].数量; //女的数量加载到数组中
compony[w] = data[i].ORGEH1TXT; //X轴的公司名称加载到数组中
w++;
}
}
//第二步 设置option初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
//第三部,数组数据加载到option;
option = {
title: {
text: '深科技员工数量',
subtext: '人数'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['男', '女']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
//grid设置标签与底部距离,X轴文字过长显示不了
grid: {
left: '10%',
bottom: '10%'
},
xAxis: [
{
type: 'category',
data: compony,
//axisLabel标签设置X轴文字间隔与倾斜度
axisLabel: {
interval: 0,
rotate: -10,
},
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '男',
type: 'bar',
data: man, //加载Y轴数据,男的数量
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '女',
type: 'bar',
data: woman, //加载Y轴数据,女的数量
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
}
]
};
// 第四部 为echarts对象加载数据
myChart.setOption(option);
}
});
</script>
</div>