EChart动态加载(不带)

ECharts动态加载简介1)它一个直观，生动，可交互，可高度个性化定制的Web数据可视化图表。2)详情可以参考eCharts官网文档说明1)之所以写这个文档是因为,网上的资源多以静态的页面为主,完全不适合我们先有的web开发.毕竟资源是不定的,依据后台数据动态生成,可以替我们剩下许多的时间2)本文提供了2种方式生成(优缺点就不累赘了)a)Ajax异步方式b)Jsp生成开发环境1)SSH(SpringMvc)2)MyEclipse103)JDK1.64)Win7x64标准配置首先配置好你的开发环境并从网上下载对应的eCharts以及zrender插件eCharts::按照下图分别将eCharts以及Zrender的src目录放到工程目录WebRoot下对应的/WebRoot目录结构对应echarts的src目录.对应zrender的src目录myecharts.js用于ajax异步方式生成图标esl.js是必须要有的它来自echarts压缩包\doc\asset\js\esl\esl.js文件在需要用到echarts的页面head中首先插入新的js文件scriptsrc=echarts/esl.jstype=text/javascript/scriptscriptsrc=echarts/echarts/echarts.jstype=text/javascript/scripttype=text/javascript/scriptBody中给echarts指定一片区域显示图标divid=mainstyle=height:400px/divscripttype=text/javascriptrequire.config({packages:[{name:'echarts',location:'%=basePath%echarts/echarts',main:'echarts'},{name:'zrender',location:'%=basePath%echarts/zrender',main:'zrender'}]});//在这里面写入官网提供的require,即可生成对应的图表/script接下来请看不同的2种使用方式Ajax异步加载一个js文件用来提供生成Echarts的方法myecharts.jsvarmyChart;//创建ECharts图表方法functionDrawEChart(ec){//---折柱---myChart=ec.init(document.getElementById('main'));//图表显示提示信息myChart.showLoading({text:图表数据正在努力加载...});//定义图表optionsvaroptions={title:{text:通过Ajax获取数据呈现图标示例,subtext:数据纯属虚构,sublink:},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,//返回数据形式为jsonsuccess: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.javapublicclassSeries{privateStringname;privateStringtype;privateList?data;publicstaticStringTYPE_LINE=line;publicstaticStringTYPE_BAR=bar;//忽略了JSON字符串的生成语法,以及他们的getter,setter语句}ChartData.javapublicclassChartData{privateListStringlegendData;//用来存储所有的Series名称,可以用seriesList生成privateListStringxAxisData;//通用的横轴显示数据privateListSeriesseriesList;//个例,显示的数目//忽略了JSON字符串的生成语法,以及他们的getter,setter语句}配置对应的Action方法ChartsActive.java@Controller(ChartsActive)publicclassChartsActiveextendsActionSupport{publicStringajaxGetMoreData(){try{ServletActionContext.getResponse().setContentType(text/html;charset=utf-8);PrintWriterwrite=ServletActionContext.getResponse().getWriter();ListStringxAxisData=newArrayListString();ListSeriesseriesList=newArrayListSeries();for(inti=1;i13;i++){xAxisData.add(i+月);}for(inti=0;i3;i++){ListIntegerlist=newArrayListInteger();for(intj=0;j5;j++){list.add((int)(Math.random()*40));}Seriesseries=newSeries(销售+i,Series.TYPE_LINE,list);seriesList.add(series);}ChartDatacd=newChartData(xAxisData,seriesList);write.write(cd.toString());//将对应的JSON字符串返回给前台write.flush();write.close();}catch(IOExceptione){e.printStackTrace();}returnnull;}}生成的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生成标准的基础上,增加如下代码bodydivid=mainstyle=height:400px/divscripttype=text/javascript//路径配置require.config({packages:[{name:'echarts',location:'%=basePath%echarts/echarts',main:'echarts'},{name:'zrender',location:'%=basePath%echarts/zrender',main:'zrender'}]});require(['echarts','echarts/chart/bar','echarts/chart/line'],function(ec){//基于准备好的dom，初始化echarts图表varmyChart=ec.init(document.getElementById('main'));varoption={animation:false,tooltip:{show:true,feature:{saveAsImage:{show:true}}},legend:{data:['销量']/*这里设置显示的数据属于什么范围*/},xAxis:[{type:'category',data:%=request.getAttribute(chartName)%}],yAxis:[{type:'value'}],series:[{name:销量,type:bar,/*data:[5,20,40,10,10,20,12]*/data:%=request.getAttribute(chartValue)%}]};//为echarts对象加载数据myChart.setOption(option);});/script/body添加处理方法publicStringtoBarChart(){String[]name={衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子,西服};double[]value={5,20,40,10,10,20,(int)(Math.random()*40)};chart=newChart(销售,name,value);StringJson=chart.getThisJson();//仅仅是将对应的数据转化成json字符串,比较简单.ServletActionContext.getRequest().setAttribute(chartName,chart.getNameJson().substring(12));ServletActionContext.getRequest().setAttribute(chartValue,chart.getValueJson().substring(13));returnsuccess;}不推荐用jsp,毕竟每次刷新数据,都需要加载整个页面,但是开发过程相对简单附录相关软件请下载带附件的文档源码请下载带附件的文档