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

js代码：

//科技创新图表的数据加载
function getChunagXinEcharts() {
$.ajax({
type : 'GET',
async : false,
url : location.protocol + "/bonc_kmioc_ind/fullscreenOverview/getChuangXinEcharts",
data : {
type : "2"
},
success : function(result) {
var myChart = echarts.init(document
.getElementById('scienceInnovateChart'));
var yearArr = result.yearArr;					//横坐标年份
var saleValueArr = result.saleValueArr;			//销售收入总额
var RDProportionArr = result.RDProportionArr;	//占销售收益比重%
var RDValueArr = result.RDValueArr;				//R&D经费投入总额
// 科技创新配置项
var scienceInnovateOption = {
tooltip : {
trigger : 'axis'
},
grid : {
show : true,
containLabel : true,
borderWidth : 0,
left : 0,
top : 18,
right : 20,
bottom : 20
},
//				legend : {
//					right : 80,
//					data : [ '销售收入总额', 'R&D经费投入', '占销售收益比重', ],
//					textStyle : {
//						color : '#fff',
//						weight : 'bold'
//					},
//				},
textStyle : {
color : '#fff',
fontSize : 10
},
xAxis : [ {
axisTick : {
show : false,
},
type : 'category',
axisLine : {
lineStyle : {
color : '#fff',
width : 1
}
},
axisLabel : {
// inside: true,
textStyle : {
color : '#fff',
fontFamily : 'MicrosoftYaHei',
fontSize : 12,
}
},
splitLine : {
show : false
},
data : yearArr,
} ],
yAxis : [ {
type : 'value',
axisLine : {
lineStyle : {
color : '#fff',
width : 1
}
},
splitArea : {
show : true,
areaStyle : {
color : [ 'transparent', '#15202F' ]
}

},
axisLabel : {
// inside: true,
textStyle : {
color : '#fff',
fontFamily : 'MicrosoftYaHei'
}
},
splitLine : {
show : false
},
max : 20,
name : '(亿元)',
nameGap : 6,
nameLocation : 'end',
nameTextStyle : {
color : '#fff',
weight : 'bold',
fontSize : 12,
fontFamily : 'MicrosoftYaHei'
},
interval : 30,
max : 50,
} ],
series : [
{
name : '销售收入总额',
type : 'bar',
barWidth : 22,
stack : '总量',
label : {
normal : {
show : false,
position : 'insideRight'
}
},
itemStyle : {
normal : {
color : '#3bfeff'
}
},
label : {
normal : {
show : true,
position : 'middle',
textStyle : {
color : '#fff',
fontSize : 12,
fontFamily : 'MicrosoftYaHei'
}
},
},
itemStyle : {
normal : {
color : new echarts.graphic.LinearGradient(0, 0, 0,
1, [ {
offset : 0,
color : '#05edef'
}, {
offset : 1,
color : '#4e3171'
} ])
},
},
data : saleValueArr,
},
{
name : 'R&D经费投入',
type : 'bar',
barWidth : 22,
stack : '总量',
label : {
normal : {
show : false,
position : 'insideRight'
}
},
itemStyle : {
normal : {
color : '#ffc536'
}
},
label : {
normal : {
show : true,
position : 'top',
textStyle : {
color : '#fff',
fontSize : 12,
fontFamily : 'MicrosoftYaHei'
}
},
},
itemStyle : {
normal : {
color : new echarts.graphic.LinearGradient(0, 0, 0,
1, [ {
offset : 0,
color : '#dded06'
}, {
offset : 1,
color : '#4ea38e'
} ])
},
},
data : RDValueArr,
},

{
name : '占销售收益比重%',
type : 'line',
itemStyle : {
normal : {
color : '#e0ee03'
}
},
data : RDProportionArr,
} ]
};
myChart.setOption(scienceInnovateOption);
}
});
}

service层代码：

/**
* 根据统计年份和type获取财政收入和科技创新统计图信息
*
* @param param
*            type 1代表“财政收入”，2代表“科技创新” statisticalYear 统计年份
* @return
*/
@Override
public Map<String, Object> getFinanceEcharts(Map<String, Object> param) {
Map<String, Object> data = new HashMap<String, Object>();
List<FinanceInfo> list = financeInfoDao.findFinanceInfo(param);
if (list != null && list.size() != 0) {
int countTimes = list.size();
String[] monthArr = new String[countTimes];
String[] yearArr = new String[countTimes];
String[] saleValueArr = new String[countTimes];
String[] RDProportionArr = new String[countTimes];
String[] RDValueArr = new String[countTimes];
String[] highTechIndustryArr = new String[countTimes];
String[] financeValueArr = new String[countTimes];
for (int i = 0; i < countTimes; i++) {
monthArr[i] = list.get(list.size() - countTimes + i)
.getStatisticalMonth() == null ? list.get(list.size() - countTimes + i)
.getStatisticalMonth() : list.get(list.size() - countTimes + i)
.getStatisticalMonth()+"月";
yearArr[i] = list.get(list.size() - countTimes + i)
.getStatisticalYear();
saleValueArr[i] = list.get(list.size() - countTimes + i)
.getSaleValue();
RDProportionArr[i] = list.get(list.size() - countTimes + i)
.getRDProportion();
RDValueArr[i] = list.get(list.size() - countTimes + i)
.getRDValue();
highTechIndustryArr[i] = list.get(list.size() - countTimes + i)
.getHighTechIndustry();
financeValueArr[i] = list.get(list.size() - countTimes + i)
.getFinanceValue();
}
data.put("monthArr", monthArr);
data.put("yearArr", yearArr);
data.put("saleValueArr", saleValueArr);
data.put("RDProportionArr", RDProportionArr);
data.put("RDValueArr", RDValueArr);
data.put("highTechIndustryArr", highTechIndustryArr);
data.put("financeValueArr", financeValueArr);
} else {
data.put("monthArr", new String[0]);
data.put("yearArr", new String[0]);
data.put("saleValueArr", new String[0]);
data.put("RDProportionArr", new String[0]);
data.put("RDValueArr", new String[0]);
data.put("highTechIndustryArr", new String[0]);
data.put("financeValueArr", new String[0]);
}
return data;
}

结果：