【Echarts】Echarts2.0动态加载柱状图~

js代码：

// 经济发展主要指标配置项
function getEconomicsEcharts() {
$.ajax({
type : 'GET',
async : false,
url : location.protocol + "/bonc_kmioc_ind/fullscreenOverview/getEconomicsEcharts",
data : {
year : "2015"
},
success : function(result) {
var myChart = echarts.init(document
.getElementById('industryAddedChart'));
var data = result.dataArr;
var xAxisArr = result.xAxisArr;
var legendArr = result.legendArr;
// 经济发展主要指标配置项
var industryAddedOption = {
grid : {
show : true,
top : 28,
right : 20,
borderColor : 'transparent'
},
legend : {
right : 50,
data : [ '2010年', '2015年' ],
color : '#fff',
icon : 'bar',
itemWidth : 10,
itemHeight : 10,
textStyle : {
color : '#fff',
weight : 'bold'
}
},
calculable : true,
xAxis : [ {
axisLabel : {
interval : 0,
rotate : 37,
textStyle : {
color : '#fff',
// weight: 'bold',
fontSize : 12
}

},
axisLine : { // 轴线show: true,
lineStyle : {//轴线颜色样式
color : "#fff",
type : 'solid',
width : 1
}
},
axisTick : {
show : false,
},
type : 'category',
data : xAxisArr
} ],
yAxis : [ {
axisLabel : {
textStyle : {
color : '#fff',
// weight: 'bold',
fontSize : 12
}
},
axisLine : { // 轴线show: true,
lineStyle : {//轴线颜色样式
color : "#fff",
type : 'solid',
width : 1
}
},
left : '5%',
splitLine : {
show : false
},
type : 'value',
splitArea : {
show : true,
areaStyle : {
color : [ '#131e2b', 'transparent' ]
}
},
name : '(亿元)',
nameLocation : 'end',
nameTextStyle : {
color : '#fff',
// weight: 'bold',
fontSize : 12,
fontFamily : 'MicrosoftYaHei'
},
} ],
series : [
{
name : '2010年',
type : 'bar',
data : data[1],
itemStyle : {
normal : {
color : new echarts.graphic.LinearGradient(
0, 0, 0, 1, [ {
offset : 0,
color : '#2ECBB8'
}, {
offset : 1,
color : '#0C5C67'
} ])
},
},

barWidth : 20,
label : {
normal : {
show : true,
position : 'top',
textStyle : {
color : '#fff',
fontSize : 12,
fontFamily : 'MicrosoftYaHei'
}
},
},
},

{
barGap : '22%',
name : '2015年',
type : 'bar',
data : data[0],
barWidth : 22,
itemStyle : {
normal : {
color : new echarts.graphic.LinearGradient(
0, 0, 0, 1, [ {
offset : 0,
color : '#C43144'
}, {
offset : 1,
color : '#413577'
} ])
},
},
label : {
normal : {
show : true,
position : 'top',
textStyle : {
color : '#fff',
fontSize : 12,
fontFamily : 'MicrosoftYaHei'
}
},
},
}

]
};
myChart.setOption(industryAddedOption);
}
});
}

service层方法：

/**
* 获取经济指标统计图数据
*
* @param statisticalYear
* @return
*/
@Override
public Map<String, Object> getEconomicsEcharts(String statisticalYear) {

Map<String, Object> data = new HashMap<String, Object>();
List<EconomicsNorm> list = economicsNormDao
.fingEconomicsInfo(statisticalYear);
if (list != null && list.size() != 0) {
int countTimes = getCountTimes(list.size());
String[] xAxisArray = new String[countTimes];
String[] legendArr = new String[] { "2010", "2015" };
String[] firstArr = new String[countTimes];
for (int i = 0; i < countTimes; i++) {
xAxisArray[i] = list.get(list.size() - countTimes + i)
.getNormName();
firstArr[i] = list.get(list.size() - countTimes + i)
.getNormValue();
}
data.put("xAxisArr", xAxisArray);
data.put("dataArr", firstArr);
data.put("legendArr", legendArr);
} else {
data.put("xAxisArr", new String[0]);
data.put("dataArr", new Double[0][0]);
data.put("legendArr", new String[0]);
}
return data;
}

结果：