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

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

与上一篇不同的是，本例子将整个chart放在AJAX的success中加载，而不是只将series[]数据部分加载。

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

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

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

结果：