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

Echarts在数据可视化方面广泛使用，记录一个使用Echarts动态加载折线图和柱状图的例子。方便以后使用。

【Echarts】2.0官方API：http://echarts.baidu.com/echarts2/doc/example.html

【Echarts】3.0官方API：http://echarts.baidu.com

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;
	}

结果：