最代码广告位
木头人的gravatar头像
木头人2017-01-22 22:01:08

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

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

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

       2.使用springmvc的时候,使用@ResponseBody的注解时,要在xml中配置json的格式转换器,因为spring默认使用的jackson,要使用默认的话,要导入Jackson的jar包。新宝6彩票_[官网首页]当然你也可以自己定义自己的json转换器。

新宝6彩票_[官网首页]      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)运行的效果图:

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

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

打赏

文件名:echarts.zip,文件大小:473.981K下载
最代码最近下载分享源代码列表最近下载
qq986549933 LV72019年11月11日
月亮星星星星星星
caozongan LV122019年9月26日
月亮月亮月亮
koumeiyuu LV72019年9月18日
月亮星星星星星星
18103120485 LV42019年9月8日
月亮
whywhywhy LV102019年8月20日
月亮月亮星星星星
欧阳欧阳欧阳 LV22019年8月18日
星星星星
wanglong_wang LV122019年8月1日
月亮月亮月亮
农村电脑名称 LV182019年7月31日
太阳星星星星
lz_123 LV62019年5月28日
月亮星星星星
一夜枫萧 LV62019年5月16日
月亮星星星星
最代码最近浏览分享源代码列表最近浏览
1391237686 LV6前天
月亮星星星星
6453aaa LV52月13日
月亮星星
zzww123654 LV32月12日
星星星星星星
wei199 LV62月12日
月亮星星星星
JinghanHe LV72月11日
月亮星星星星星星
764953 LV62月7日
月亮星星星星
rcdxph1月30日
暂无贡献等级
2244022522 LV11月17日
星星
小雨牛 LV41月4日
月亮
sky12a LV62019年12月21日
月亮星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友

页面底部区域 foot.htm