echart动态加载(不带附件)

fangsu_wb 贡献于2016-12-14

作者 Administrator  创建于2015-01-30 07:19:15   修改者Administrator  修改于2015-01-30 09:15:48字数4855

文档摘要:
关键词:

ECharts动态加载 简介 1) 它一个直观,生动,可交互,可高度个性化定制的Web数据可视化图表。 2) 详情可以参考eCharts官网http://echarts.baidu.com/ 文档说明 1) 之所以写这个文档是因为,网上的资源多以静态的页面为主,完全不适合我们先有的web开发.毕竟资源是不定的,依据后台数据动态生成,可以替我们剩下许多的时间 2) 本文提供了2种方式生成(优缺点就不累赘了) a) Ajax异步方式 b) Jsp生成 开发环境 1) SSH(SpringMvc) 2) MyEclipse10 3) JDK1.6 4) Win7 x64 标准配置 首先配置好你的开发环境并从网上下载对应的eCharts以及zrender插件 eCharts:http://echarts.baidu.com/index.html Zrender:https://github.com/ecomfe/zrender 按照下图分别将eCharts以及Zrender的src目录放到工程目录WebRoot下 对应的/WebRoot目录结构 对应echarts的src目录. 对应zrender的src目录 myecharts.js 用于ajax异步方式生成图标 esl.js是必须要有的 它来自echarts压缩包\doc\asset\js\esl\esl.js文件 在需要用到echarts的页面head中首先插入新的js文件 Body中给echarts指定一片区域显示图标
接下来请看不同的2种使用方式 Ajax异步加载 一个js文件用来提供生成Echarts的方法 myecharts.js var myChart; //创建ECharts图表方法 function DrawEChart(ec) { //--- 折柱 --- myChart = ec.init(document.getElementById('main')); //图表显示提示信息 myChart.showLoading({ text : "图表数据正在努力加载..." }); //定义图表options var options = { title : { text : "通过Ajax获取数据呈现图标示例", subtext : "数据纯属虚构", sublink : "http://baidu.com" }, tooltip : { trigger : 'axis' }, legend : { data : [] }, toolbox : { show : true, feature : { mark : false } }, calculable : true, xAxis : [ { type : 'category', data : [] } ], yAxis : [ { type : 'value', splitArea : { show : true } } ], series : [] }; //通过Ajax获取数据 $.ajax({ type : "post", async : false, //同步执行 url : "ajaxGetMoreData", dataType : "json", //返回数据形式为json success : function(result) { if (result) { //将返回的category和series对象赋值给options对象内的category和series //因为xAxis是一个数组 这里需要是xAxis[i]的形式 options.xAxis[0].data = result.xAxisData; options.series = result.seriesList; options.legend.data = result.legendData; //这些数据对应java文件生成的Json格式 myChart.hideLoading(); myChart.setOption(options); } }, error : function(errorMsg) { alert("图表请求数据失败啦!"); } }); } Series.java public class Series { private String name; private String type; private List data; public static String TYPE_LINE = "line"; public static String TYPE_BAR = "bar"; //忽略了JSON字符串的生成语法,以及他们的getter,setter语句 } ChartData.java public class ChartData { private List legendData;// 用来存储所有的Series名称,可以用seriesList生成 private List xAxisData;// 通用的横轴显示数据 private List seriesList;// 个例,显示的数目 //忽略了JSON字符串的生成语法,以及他们的getter,setter语句 } 配置对应的Action方法 ChartsActive.java @Controller("ChartsActive") public class ChartsActive extends ActionSupport{ public String ajaxGetMoreData(){ try { ServletActionContext.getResponse().setContentType("text/html;charset=utf-8"); PrintWriter write = ServletActionContext.getResponse().getWriter(); List xAxisData = new ArrayList(); List seriesList = new ArrayList(); for (int i = 1; i < 13; i++) { xAxisData.add(i+"月"); } for (int i = 0; i < 3; i++) { List list = new ArrayList(); for (int j = 0; j < 5; j++) { list.add((int)(Math.random()*40)); } Series series = new Series("销售"+i, Series.TYPE_LINE, list); seriesList.add(series); } ChartData cd = new ChartData(xAxisData, seriesList); write.write(cd.toString()); //将对应的JSON字符串返回给前台 write.flush(); write.close(); } catch (IOException e) { e.printStackTrace(); } return null; } } 生成的json对象对应的格式 {"legendData":["销售0","销售1","销售2"], "xAxisData":["1月","2月","3月","4月","5 月","6月","7月","8月","9月","10月","11月","12月"], "seriesList":[ {"name":"销售0","type":"line","data":[30,20,33,0,6]}, {"name":"销售 1","type":"line","data":[20,33,26,14,6]}, {"name":"销售 2","type":"line","data":[36,18,28,8,36]} ]} 自己配置好对应的Struts文件 之后修改需要使用echarts的页面 利用Ajax方法提交,可以减轻服务器的处理数据,更适合查看一些实时性的信息,减少系统开销 Jsp生成 标准的基础上,增加如下代码
添加处理方法 public String toBarChart(){ String[] name = { "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子","西服"}; double[] value = { 5, 20, 40, 10, 10, 20 ,(int)(Math.random()*40)}; chart = new Chart("销售",name,value); String Json = chart.getThisJson(); //仅仅是将对应的数据转化成json字符串,比较简单. ServletActionContext.getRequest().setAttribute("chartName", chart.getNameJson().substring(12)); ServletActionContext.getRequest().setAttribute("chartValue", chart.getValueJson().substring(13)); return "success"; } 不推荐用jsp,毕竟每次刷新数据,都需要加载整个页面,但是开发过程相对简单 附录 相关软件 请下载带附件的文档 源码 请下载带附件的文档

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档