使用ajax加载echarts图表

百度echarts是一种很好的绘制图表的工具，现在介绍一下如何异步加载echarts的数据

首先贴上百度echarts的官网地址(http://echarts.baidu.com/index.html)，下载echarts.js文件和喜欢的主题js

我的demo例子是基于SSM（Spring+SpringMVC+MyBatis）框架+Maven 创建的，工程结构如下

下面来梳理一下图表需要用到的数据： 1、legend的data：图例组件，data属性要与xAxis的data属性一致 2、xAxis的data：x轴的数值 3、series： 填充图表的数据 首先看一下jsp页面如何设置 1、导入js文件 <script src="jquery/1.9.1/jquery.min.js"></script> <script src="echarts/echarts.js"></script> <script src="echarts/macarons.js"></script>

2、定义div块

<!-- 定义一个div块，设置宽高，图表就加载到div里面 --> <div id="main" style="width: 600px; height: 400px;"></div>

3、设置js脚本，利用ajax加载数据

<script type="text/javascript"> //基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main'),'macarons'); $.ajax({ 'url' : '/echarts/chart/getAllCount.do', //url路径 'type' : 'post', //数据传送方法 'dataType' : 'json', //返回的数据类型 success : function(result) { fetchData(result); } }) myChart.showLoading(); //显示缓冲遮盖层 function fetchData(result) { myChart.hideLoading(); //隐藏遮盖层 myChart.setOption({ //加载echarts title : { text: '企业年用户增加数', }, tooltip : { //提示框组件 trigger: 'axis' }, legend: { //图例组件 data:result.legend //data:["数量"] }, toolbox: { show : true, feature : { mark : {show: true}, magicType : {show: true, type: ['line', 'bar']}, //可以转换为柱状图或折线图（由type定义） } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : result.category //data：["2016","2017","2018"] } ], yAxis : {}, series : [ { name: result.series.name, type: result.series.type, data: result.series.data, //data:["4","10","1"] markPoint : { //图表标注 data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { //图表标注线 data : [ {type : 'average', name: '平均值'} ] } }, ] }); } </script> 然后看一下后台的设置： 1、ChartsModel.java （包含列表所需的所有数据） public class ChartsModel { private List legend; //对应于图表的legend的data数组 private List category; //对应于图表的category的data数组（就是x轴） private SeriesModel series; //图表的series属性是一个对象数组，额外设置一个series类 //get、set方法 public List getLegend() { return legend; } public void setLegend(List legend) { this.legend = legend; } public List getCategory() { return category; } public void setCategory(List category) { this.category = category; } public SeriesModel getSeries() { return series; } public void setSeries(SeriesModel series) { this.series = series; } }

2、SeriesModel.java

public class SeriesModel { private int id; //series的序号（因为可能有多个series） private String name; //series的名称，对应legend的name private String type; //图表类型，可以是line，pie之类的 private List data; //图表数据 //对应的get、set方法 public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getType() { return type; } public void setType(String type) { this.type = type; } public List getData() { return data; } public void setData(List data) { this.data = data; } }

3、ChartServiceImpl.java的一些代码 （封装图表数据）

public ChartsModel getAllCount(){ List<Map> list=new ArrayList(chartDao.getAllCount()); ChartsModel chartsModel=new ChartsModel(); SeriesModel seriesModel=new SeriesModel(); //设置legend数组 ArrayList list1=new ArrayList(); list1.add("数量"); //设置category数组（X轴） ArrayList list2=new ArrayList(); for(int i=0;i<list.size();i++){ list2.add(list.get(i).get("years")); } //设置series的data数组 ArrayList list3=new ArrayList(); for(int i=0;i<list.size();i++){ list3.add(list.get(i).get("count")); } seriesModel.setId(1); seriesModel.setName("数量"); //series的name要与legend的元素一致 seriesModel.setType("bar"); //类型设为柱形图 seriesModel.setData(list3); //填充在X轴上面的Y轴数据 chartsModel.setLegend(list1); chartsModel.setCategory(list2); chartsModel.setSeries(seriesModel); return chartsModel; }

4、Controller层的调用（要对应前端ajax的url地址）

@Controller @RequestMapping("/chart") public class ChartController { @Resource(name="ChartServiceImpl") IChartService chartService; @RequestMapping(value="/getAllCount.do",method=RequestMethod.POST) @ResponseBody public ChartsModel getAllCount(){ return chartService.getAllCount(); } }

最终效果图：

最后附上demo的下载地址：（http://pan.baidu.com/s/1dFIcZ89）

ps：demo中还加上了饼图的异步加载方法，直接上代码吧。