1.下载前段框架并放入项目中去.
2.在js中调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--> <!--Step:1 为ECharts准备一个具备大小(宽高)的Dom--> <div id="main" style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div> <div id="mainMap" style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div> <!--Step:2 Import echarts.js--> <!--Step:2 引入echarts.js--> <script src="${base.contextPath}/js/echarts.js"></script> <script type="text/javascript" src="${base.contextPath}/js/jquery-1.6.2.min.js"></script> <script type="text/javascript"> // Step:3 conifg ECharts's path, link to echarts.js from current page. // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径 require.config({ paths : { echarts : '${base.contextPath}/js' } }); // Step:4 require echarts and use it in the callback. // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径 $(document).ready( function() { $.ajax({ url : "${base.contextPath}/total/data?type=1", type : 'get', contentType : "application/json", cache : false, success : function(text) { var data = text; bar(data); }, error : function(jqXHR, textStatus, errorThrown) { btnSave.setEnabled(true); if (400 == jqXHR.status || 403 == jqXHR.status || 500 == jqXHR.status) return; var text = "操作失败," + jqXHR.responseText; mini.alert(text); } }); }); // bar(null); function bar(data) { var sData = new Array(); var sX = new Array(); for (i = 0; i < data.length; i++) { sData[i] = data[i].total; sX[i] = data[i].brand; } require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', //'echarts/chart/map' ], function(ec) { //--- 折柱 --- var myChart = ec.init(document.getElementById('main')); myChart.setOption({ tooltip : { trigger : 'axis' }, legend : { data : [ '总数' ] }, toolbox : { show : true, feature : { mark : { show : true }, dataView : { show : true, readOnly : false }, magicType : { show : true, type : [ 'line', 'bar' ] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, xAxis : [ { type : 'category', data : sX } ], yAxis : [ { type : 'value', splitArea : { show : true } } ], series : [ { name : '总数', type : 'bar', data : sData }, /* { name:'降水量', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] } */ ] }); }); } </script> </body> </html>