入门示例中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。
js文件：
jquary.js 提取码：pg1b
echarts.js 提取码：rrzn
(1). 先设置完其他样式，显示一个空的直角坐标轴，然后获取数据填入数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>myTitle</title> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> </head> <body> <!--div容器--> <div id="mydiv" style="width: 600px;height: 400px"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('mydiv')) myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] }); /body> </html>(2). 然后通过$.post()来动态加载数据
<script type="text/javascript"> ... //异步加载数据 $.post("ajax",function (msg) { // 填入数据 myChart.setOption({ xAxis: { //categories标签 data: msg.categories }, series: [{ // 根据名字对应到相应的系列 name: '销量', //data标签 data: msg.data }] }); }) </script>(3). 根据ajax中的标签在controller中的方法中设置对应的值
@Controller public class IndexController { @RequestMapping("/index") public String show() { return "index"; } @RequestMapping("ajax") @ResponseBody //把java对象转换为json对象 public Map<String,Object> ajax(){ List data= new ArrayList<Integer>(); data.add(5); data.add(20); data.add(36); data.add(10); data.add(20); List categories = new ArrayList<String>(); categories.add("毛衣"); categories.add("衬衫"); categories.add("袜子"); categories.add("大衣"); categories.add("鞋子"); Map map = new HashMap<String,Object>(); map.put("categories",categories); map.put("data",data); return map; } }测试结果：
