原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=&.stephen.echarts& /&
&mvc:annotation-driven&&!-- 这里替代了配置注解适配器和注解映射器 --&
&/mvc:annotation-driven&
&bean id=&stringConverter&
class=&org.springframework.http.converter.StringHttpMessageConverter&&
&property name=&supportedMediaTypes&&
&value&text/charset=UTF-8&/value&
&/property&
&!-- 输出对象转JSON支持 --&
&bean id=&jsonConverter&
class=&org.springframework.http.converter.json.MappingJackson2HttpMessageConverter&&
&property name=&supportedMediaTypes&&
&value&application/charset=UTF-8&/value&
&/property&
&bean class=&org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter&&
&property name=&messageConverters&&
&ref bean=&stringConverter& /&
&ref bean=&jsonConverter& /&
&/property&
&!-- 视图解析器(解析jsp视图,默认使用jstl解析) --&
class=&org.springframework.web.servlet.view.InternalResourceViewResolver&&
&!--配置视图属性(prefix:前缀 sufix:后缀) --&
&property name=&prefix& value=&/WEB-INF/jsp/&&&/property&
&property name=&suffix& value=&.jsp&&&/property&
&(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();
alert('提示', data.msg);
loadChart();
(3)运行的效果图：
(4)java代码：
public Option getBarChart(boolean isHorizontal) {
String[] citis = { &广州&, &深圳&, &珠海&, &汕头&, &韶关&, &佛山& };
int[] datas = { , ,
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. 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);
请下载代码后再发表评论
//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.ponent/echarts/.settings/org.mon.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/test/echarts/src/main/test/echarts
编程语言基础
数据库开发
客户端开发
服务器软硬件
开源组件类库
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
暂无贡献等级
扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友ECHARTS使用总结
最近这段时间使用百度的echarts做各种图标项目，之所以选择echarts是因为可以对他进行样式改变，可以修改的面目全非。最新版本的不能兼容到IE8，做到兼容IE8选择echarts2.2的版本。
头部引用： &script src=&../../plugins/echarts2.2/build/dist/echarts.js&&&/script&
JS中配置文件路径：
// Step:3 conifg ECharts's path, link to echarts.js from current page.
& & // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
& & paths: {
& && &echarts: '../../plugins/echarts2.2/build/dist'
& && &//&&'echarts/chart/pie': '../../plugins/echarts/echarts-map',
& && &&&//'echarts/chart/bar': '../../plugins/echarts/echarts-map'
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
& && &&&'echarts',
& && &&&'echarts/chart/pie',
& && &&&'echarts/chart/bar'
2.进行配置使用：
function (ec) {
var myChart = ec.init(document.getElementById('pieChart4_main'));
& && && & //动画设置
& && && && &myChart.showLoading({
& && && && && & text: 'loading……',
& && && && && & effect: 'whirling',
& && && && && & textStyle: {
& && && && && && &&&fontSize: 20
& && && && && & }
& && && && &});
& && && &&&//一般设置
& && && && &myChart.setOption({
& && && && && && &&&orient: 'vertical',
& && && && && && &&&x: 'right',
& && && && && && &&&y: 'center',
& && && && && && &&&itemGap: 20,
& && && && && && &&&itemWidth: 20,& && && && & // 图例图形宽度
& && && && && && &&&itemHeight: 14,
& && && && && && &&&textStyle: {
& && && && && && && && &color: '#666666'& && && & // 图例文字颜色
& && && && && && &&&},
& && && && && && &&&data: age,
//给图例增加数值，这是动态获取的图例需要for循环读出
& && && && && && &&&formatter: function (name) {
& && && && && && && && &if (agechart.length &= vNum + 2) {
& && && && && && && && && & vNum++;
& && && && && && && && &} else {
& && && && && && && && && & vNum = 0;
& && && && && && && && &}
& && && && && && && && &return name+ && &&+ agechart[vNum].value&&;
& && && && && && &&&}
//若图例是静态固定的，则可以用swtich
formatter: function (name) {
& && && && && && && && &switch (name) {
& && && && && && && && && & case &男&:
& && && && && && && && && && &&&return name + && & & + b.
& && && && && && && && && && &&&
& && && && && && && && && & case &女&:
& && && && && && && && && && &&&return name + && & & + g.
& && && && && && && && && && &&&
& && && && && && && && && &
& && && && && && && && && & default:
& && && && && && && && && && &&&
& && && && && && && && &}
& && && && && && &&&}
& && && && && & },
//窗口重新渲染的方法
setTimeout(function () {//echarts resize
& && && && && & window.onresize = function () {
& && && && && && &&&myChart.resize();
& && && && && & }
& && && && &}, 200);
//动画释放的方法
& && && && &setTimeout(function () {
& && && && && & myChart.hideLoading();
& && && && && &// myChart.setOption();
& && && && &}, 2000)
9 总笔记数
8916 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：jquery echarts简单例子-jquery-网页制作-壹聚教程网jquery echarts简单例子
ECharts是一款开源、功能强大的数据可视化产品,紧跟着大数据时代的步伐!希望ECharts在未来继续发扬开源的力量,让国内外更多的人用上这款数据可视化产品，下面我们就一起来一个jquery echarts简单例子了。
　最近做软件工程项目的时候，由于设计图中有柱状图和饼图的设计，第一反应用原生js写肯定很麻烦，于是我请求能否不做，但我们的PM铁了心要做，最终逼迫我找到了这个强大的图表库，哈哈，在这里感谢一下PM李佳玮。(当我发现它还兼容IE6-8时，真的炒鸡感动!)
ECharts提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。
废话不多说，马上进入ECharts的使用吧。
首先我们进入ECharts的官网/index.html(向百度前端团队致敬)，进去以后下载ECharts。
　　下载好的目录:
　　初学的话我们只要把目光放在build文件上，这里面包含了我们制作图表所需的相关资源文件。
　　引入ECharts包有三种方式，官方文档中有三种方式的具体介绍/doc/doc.html#引入ECharts。
　　这里我采用官方推荐的模块化单文件引入,首先需要熟悉模块化开发。ECharts是一个符合AMD规范的模块加载器，AMD规范相信大家都不陌生，它是客户端(就是浏览器上)的开发规范，而Node.js有CommonJs开发规范。如果不是很了解AMD规范可以参考一下文章:
AMD---浏览器中的开发规
前面提到，为实现与Node.js相同方式的模块写法，大牛们做了很多努力。
但浏览器环境不同于服务器端，它的模块有一个HTTP请求过程(而Node.js的模块文件就在本地)，这个请求过程多数使用script tag，script 默认的异步性导致很难实现与Node.js一模一样的模块格式。
Modules/Wrappings 使得实现变为现实。虽然和Node.js的模块写法不完全一致，但也有很多相似之处，使得熟悉Node.js的程序员有一些亲切感。
但Node.js终究是服务器端的JavaScript，没有必要把这些条条框框放到浏览器JavaScript环境中。
这时AMD 诞生了，它的全称为异步模块定义。从名称上看便知它是适合script tag的。也可以说AMD是专门为浏览器中JavaScript环境设计的规范。它吸取了CommonJS的一些优点，但又不照搬它的格式。开始AMD作为CommonJS的transport format 存在，因无法与CommonJS开发者达成一致而独立出来。它有自己的wiki 和讨论组 。
AMD设计出一个简洁的写模块API：
define(id?, dependencies?, factory);
id: 模块标识，可以省略。
dependencies: 所依赖的模块，可以省略。
factory: 模块的实现，或者一个JavaScript对象。
id遵循CommonJS Module Identifiers 。dependencies元素的顺序和factory参数一一对应。
以下是使用AMD模式开发的简单三层结构（基础库/UI层/应用层）：
define(function() {
&&& return {
&&&&&&& mix: function(source, target) {
define(['base'], function(base) {
&&& return {
&&&&&&& show: function() {
&&&&&&&&&&& // todo with module base
define(['data', 'ui'], function(data, ui) {
&&& // init here
&&& users: [],
&&& members: []
以上同时演示了define的三种用法
定义无依赖的模块（base.js）
定义有依赖的模块（ui.js，page.js）
定义数据对象模块（data.js）
细心的会发现，还有一种没有出现，即具名模块
4，具名模块
define('index', ['data','base'], function(data, base) {
&&& // todo
具名模块多数时候是不推荐的，一般由打包工具合并多个模块到一个js文件中时使用。
前面提到dependencies元素的顺序和factory一一对应，其实不太严谨。AMD开始为摆脱CommonJS的束缚，开创性的提出了自己的模块风格。但后来又做了妥协，兼容了 CommonJS Modules/Wrappings 。即又可以这样写
5，包装模块
define(function(require, exports, module) {
&&& var base = require('base');
&&& exports.show = function() {
&&&&&&& // todo with module base
不考虑多了一层函数外，格式和Node.js是一样的：使用require获取依赖模块，使用exports导出API。
除了define外，AMD还保留一个关键字require。require 作为规范保留的全局标识符，可以实现为 module loader，也可以不实现。　
　　好，接下来我会展示具体的引入写法:
&!doctype html&
&&& &meta charset=&utf-8&&
&&& &div id=&main& style=&height:300&&&/div&
&&& &script type=&text/javascript& src=&echarts/build/dist/echarts.js&&&/script&
&&& &script type=&text/javascript&&
&&&&&&& require.config({
&&&&&&&&&&& paths : {
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 这里载入相对路径
&&&&&&&&&&&&&&& echarts : &echarts/build/dist&
&&&&&&&&&&& }
&&&&&&& });
&&&&&&& require(
&&&&&&&&&&& [
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 这里的echarts代表的是paths中的路径
&&&&&&&&&&&&&&& &echarts&,
&&&&&&&&&&&&&&& &echarts/chart/bar&
&&&&&&&&&&& ],&br&　　　　　　　　　　　　　　// 回调函数
&&&&&&&&&&& function(ex){
&&&&&&&&&&& }
&&&&&&& );
&&& &/script&
　js中require()表示要创建一个图标的请求，首先要列出所需图表库的资源，这里是要载入bar.js文件，因此需要引入模块&echarts/chart/bar&。在ECharts中还有很多种图表，比如pie(饼图)，map(地图)等等。
　　现在我们已经加载了我们需要的图类，接下来要做的事很简单---插入对应图类所需组件。
&!doctype html&
&&& &meta charset=&utf-8&&
&&& &div id=&main& style=&height:300&&&/div&
&&& &script type=&text/javascript& src=&echarts/build/dist/echarts.js&&&/script&
&&& &script type=&text/javascript&&
&&&&&&& require.config({
&&&&&&&&&&& paths : {
&&&&&&&&&&&&&&& echarts : &echarts/build/dist&
&&&&&&&&&&& }
&&&&&&& });
&&&&&&& require(
&&&&&&&&&&& [
&&&&&&&&&&&&&&& &echarts&,
&&&&&&&&&&&&&&& &echarts/chart/pie&
&&&&&&&&&&& ],
&&&&&&&&&&& function(ec){
&&&&&&&&&&&&&&& var myChart=ec.init(document.getElementById(&main&));
&&&&&&&&&&&&&&& var option = {
&&&&&&&&&&&&&&&&&&& title :{
&&&&&&&&&&&&&&&&&&&&&&& text : &查看企业各部门报销&,
&&&&&&&&&&&&&&&&&&&&&&& x : &center&
&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&& tooltip : {
&&&&&&&&&&&&&&&&&&&&&&& trigger : &item&,
&&&&&&&&&&&&&&&&&&&&&&& formatter : &{a} &br/& {b} : {c} ({d}%)&
&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&& legend : {
&&&&&&&&&&&&&&&&&&&&&&& orient : &vertical&,
&&&&&&&&&&&&&&&&&&&&&&& x : &left&,
&&&&&&&&&&&&&&&&&&&&&&& data : [&part1&,&part2&,&part3&,&part4&]
&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&& toolbox : {
&&&&&&&&&&&&&&&&&&&&&&& show : true,
&&&&&&&&&&&&&&&&&&&&&&& feature : {
&&&&&&&&&&&&&&&&&&&&&&&&&&& //mark : {show : true},
&&&&&&&&&&&&&&&&&&&&&&&&&&& //dataView : {show : true,readOnly : false},
&&&&&&&&&&&&&&&&&&&&&&&&&&& restore : {show : true}
&&&&&&&&&&&&&&&&&&&&&&&&&&& //saveAsImage : {shwo :true}
&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&& calculable : false,
&&&&&&&&&&&&&&&&&&& series : [
&&&&&&&&&&&&&&&&&&&&&&& {
&&&&&&&&&&&&&&&&&&&&&&&&&&& name : &饼图实例&,
&&&&&&&&&&&&&&&&&&&&&&&&&&& type : &pie&,
&&&&&&&&&&&&&&&&&&&&&&&&&&& radius : &55%&,
&&&&&&&&&&&&&&&&&&&&&&&&&&& center : [&50%&,&60%&],
&&&&&&&&&&&&&&&&&&&&&&&&&&& data : [
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& {value:100,name:&part1&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& {value:200,name:&part2&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& {value:300,name:&part3&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& {value:400,name:&part4&}
&&&&&&&&&&&&&&&&&&&&&&&&&&& ]
&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&& ]
&&&&&&&&&&&&&&& };
&&&&&&&&&&&&&&& myChart.setOption(option);
&&&&&&&&&&& }
&&&&&&& );
&&& &/script&
可以看到require()的第二个参数是个function(){}，这里应该是个回调函数，等待资源加载好后执行，这个函数中提供了创建图表所需要的信息:
　　首先要获取到需要被创建的对象，这里用DOM方法取到。
　　其次把数据集用类似json的形式存放到option中，最后传入到要被创建的对象中。
　　可以看到Option对象中的子对象，都携带了不同的信息，比如标题title，提示框(tooltip)等等，更多的组件信息可以在官方文档中查看
/doc/doc.html#选项&
最后打开浏览器就可以欣赏到一个简单的利用ECharts的图表了:
当我打开的时候还看到了很多动态的好玩的效果，都值得我们去研究。
不过框架毕竟是框架，希望大家在学习框架前一定要学好原生js~这样用起这些框架起来才会得心应手！
上一页： &&&&&下一页：相关内容}