EChart动态加载(不带附件).doc

ECharts动态加载 简介 它一个直观，生动，可交互，可高度个性化定制的Web数据可视化图表。 按照下图分别将eCharts以及Zrender的src目录放到工程目录WebRoot下 对应的/WebRoot目录结构 对应echarts的src目录. 对应zrender的src目录 myecharts.js 用于ajax异步方式生成图标 esl.js是必须要有的 它来自echarts压缩包\doc\asset\js\esl\esl.js文件 在需要用到echarts的页面head中首先插入新的js文件 script src=echarts/esl.js type=text/javascript/script script src=echarts/echarts/echarts.js type=text/javascript/script Body中给echarts指定一片区域显示图标 div id=main style=height:400px/div script type=text/javascript require.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.js var myChart; //创建ECharts图表方法 function DrawEChart(ec) { //--- 折柱 --- myChart = ec.init(document.getElementById(main)); //图表显示提示信息 myChart.showLoading({ text : 图表数据正在努力加载... }); //定义图表options var options = { 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, //返回数据形式为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 Stri