木头人
2017-01-22 22:01:08
原
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; }
请下载代码后再发表评论
文件名:echarts.zip,文件大小:473.981K
下载
- /
- /echarts
- /echarts/.classpath
- /echarts/.project
- /echarts/.settings
- /echarts/.settings/.jsdtscope
- /echarts/.settings/org.eclipse.core.resources.prefs
- /echarts/.settings/org.eclipse.jdt.core.prefs
- /echarts/.settings/org.eclipse.m2e.core.prefs
- /echarts/.settings/org.eclipse.wst.common.component
- /echarts/.settings/org.eclipse.wst.common.project.facet.core.xml
- /echarts/src
- /echarts/src/main
- /echarts/src/main/java
- /echarts/src/main/java/com
- /echarts/src/main/java/com/cn
- /echarts/src/main/java/com/cn/stephen
- /echarts/src/main/java/com/cn/stephen/echarts
- /echarts/src/main/java/com/cn/stephen/echarts/controller
- /echarts/src/main/java/com/cn/stephen/echarts/model
- /echarts/src/main/java/com/cn/stephen/echarts/service
- /echarts/src/main/java/com/cn/stephen/echarts
- /echarts/src/main/java/com/cn/stephen
- /echarts/src/main/java/com/cn
- /echarts/src/main/java/com
- /echarts/src/main/test
- /echarts/src/main/test/echarts
- /echarts/src/main/java
- /echarts/src/main
- /echarts
![最代码相关代码源代码列表](https://static.zuidaima.com/resource/img/heart_ico.png)
- Echarts图表实现三级联动,人口动态迁移图特效源码demo
- 原 vue实现echarts js树状图
- 证 echarts农业大数据统计模板
- 证 echarts农业大数据统计模板
- 证 jQuery集成echarts的模板图标实例
- 原证 spring boot整合eCharts,itext读取数据库数据显示eCharts柱状图表,支持pdf文件导出和生成图片
- echarts-demo,适合初学者
- 原证 基于ECharts3的区域人群分布监控可视化
- 原证 jquery+bootstrap+echarts数据可视化大屏展示特效实例
- 原 基于ECharts2+百度地图实现的个人位置移动轨迹可视化实例
- 证 百度地图+grid布局+毛玻璃风效果
- echarts.js插件实现中国地图省份选择效果
![最代码最近下载分享源代码列表](https://static.zuidaima.com/resource/img/heart_ico.png)
sxslbjgwzh LV2
2023年8月21日
lipiao161 LV16
2023年2月27日
wusiyin LV14
2022年9月15日
weijianguo LV7
2021年11月20日
zwt689 LV2
2021年6月23日
xcj456 LV8
2020年9月12日
hohhi LV6
2020年6月22日
kk53902500 LV11
2020年3月23日
qq986549933 LV7
2019年11月11日
caozongan LV19
2019年9月26日