echarts条形图 显示数据_Echarts通过Ajax动态获取后端数据（条形图、饼图）

目录1 饼图

2 条形图

1.1 后端-Controller层

1.2 前端

1.3 关键代码

1.4 注意事项

1.5 效果展示

2.1 后端-Controller层

2.2 前端

2.3 关键代码

2.4 效果展示

1 饼图

1.1 后端-Controller层

传的是List型数据

/**

* 按客户所在城市统计————饼图

* @param model

* @return

*/

@RequestMapping("/show")

@ResponseBody

public List show(Model model) {

List echartsList = clientService.getCity();

System.out.println("echartsList:"+echartsList.get(1).getName());

return echartsList;

}

@RequestMapping("/showCity")

public String showCity() {

return "showCity";

}

1.2 前端

showCity.html

//基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

myChart.clear();

var names = [];

var mydata = [];

$.ajax({

method: 'get',

url: '/show',

dataType: 'json',

success: function (datas) {

for (var i=0;i

names.push(datas[i].name);