Java版ECharts图表库ECharts-Java的使用(基于springmvc)

       最近研究了一下java生成报表的技术，排除那些服务器级别的报表系统。看到公司系统底层还用的jfreechart,正如现在很多开源或收费的数据可视化框架，百度的Echarts， 简数科技的hightchart这两款最为出色。但是前段代码太多了，对于搞后端的我真是太累了。还好在别人博客上看到了别人写的开源jar包，把js全部封装成java代码。在下面研究了下使用方法，在这里分享给大家。

       1.Echarts.jar开放在github上，你可以在mvn仓库中下载(注意不要忘了gson的jar,因为底层依赖了Google的gson；

       2.使用springmvc的时候，使用@ResponseBody的注解时，要在xml中配置json的格式转换器，因为spring默认使用的jackson，要使用默认的话，要导入Jackson的jar包。当然你也可以自己定义自己的json转换器。

      3.我在代码中使用的是Echarts3.0的前段js,不要和echarts2.0的弄混了。

编码情况如下：

(1)springmvc.xml的配置：

<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
		http://www.springframework.org/schema/beans/spring-beans-4.2.xsd 
		http://www.springframework.org/schema/mvc 
		http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd 
		http://www.springframework.org/schema/context 
		http://www.springframework.org/schema/context/spring-context-4.2.xsd 
		http://www.springframework.org/schema/aop 
		http://www.springframework.org/schema/aop/spring-aop-4.2.xsd">

	<context:annotation-config />
	<!--可以扫描service、controller等等 -->
	<context:component-scan base-package="com.cn.stephen.echarts" />

	<mvc:annotation-driven><!-- 这里替代了配置注解适配器和注解映射器 -->
	</mvc:annotation-driven>


	<bean id="stringConverter"
		class="org.springframework.http.converter.StringHttpMessageConverter">
		<property name="supportedMediaTypes">
			<list>
				<value>text/plain;charset=UTF-8</value>
			</list>
		</property>
	</bean>

	<!-- 输出对象转JSON支持 -->
	<bean id="jsonConverter"
		class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
		<property name="supportedMediaTypes">
			<list>
				<value>application/json;charset=UTF-8</value>
			</list>
		</property>
	</bean>
	
	<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
		<property name="messageConverters">
			<list>
				<ref bean="stringConverter" />
				<ref bean="jsonConverter" />
			</list>
		</property>
	</bean>

	<!-- 视图解析器(解析jsp视图,默认使用jstl解析) -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<!--配置视图属性(prefix:前缀 sufix:后缀) -->
		<property name="prefix" value="/WEB-INF/jsp/"></property>
		<property name="suffix" value=".jsp"></property>
	</bean>

</beans>

 (2)前段通过ajax请求：

                var barChar = echarts.init(document.getElementById('barChart'));
		function loadChart() {
			barChar.clear();
			barChar.showLoading({
				text : "正在努力加载中....."
			});
			$.getJSON("echarts/barChart.do", function(data) {
				alert(data.data);
				if (data != null) {
					barChar.setOption($.parseJSON(data.data), true);
					barChar.hideLoading();
				} else {
					alert('提示', data.msg);
				}
			});
		}
		loadChart(); 
	

(3)运行的效果图：

(4)java代码：

public Option getBarChart(boolean isHorizontal) {
		String[] citis = { "广州", "深圳", "珠海", "汕头", "韶关", "佛山" };
		int[] datas = { 6030, 7800, 5200, 3444, 2666, 5708 };
		String[] colors = { "rgb(2,111,230)", "rgb(186,73,46)", "rgb(78,154,97)", "rgb(2,111,230)", "rgb(186,73,46)",
				"rgb(78,154,97)" };
		String title = "地市数据";

		// 底层调用gson的类
		GsonOption option = new GsonOption();
		option.title(title);
		/*
		 * 工具栏(Tool.mark数据视图，Tool.mark辅助线，
		 * MagicType图切换，Tool.restore还原，Tool.saveAsImage保存为图片
		 */
		option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar),
				Tool.restore, Tool.saveAsImage);
		// 显示工具提示,设置提示格式
		option.tooltip().show(true).formatter("{a} <br/>{b} : {c}");
		// 图例
		option.legend(title);
		Bar bar = new Bar(title);
		CategoryAxis category = new CategoryAxis();// 轴分类
		// 轴数据
		category.data(citis);
		for (int i = 0; i < citis.length; i++) {
			Map<String, Object> map = new HashMap<String, Object>(2);
			map.put("value", datas[i]);
			map.put("itemStyle", new ItemStyle().normal(new Normal().color(colors[i])));
			bar.data(map);
		}
		if (isHorizontal) {// 横轴为类别、纵轴为值
			option.xAxis(category);// x轴
			option.yAxis(new ValueAxis());// y轴
		} else {// 横轴为值、纵轴为类别
			option.xAxis(new ValueAxis());// x轴
			option.yAxis(category);// y轴
		}
		option.series(bar);
		return option;
	}