java图书分析echarts_用java实现echarts里面的柱状图

引入echarts

先在页面定义一个div

前端js代码

var columnar = echarts.init(document.getElementById('columnar'));

/*发送ajax请求到后台，动态为option1赋值*/

$.ajax({

url:"/echarts/columnar",

type:"GET",

success:function(e){

// 指定图表的配置项和数据

var option1 = {

title: {

text: e.title

},

tooltip: {},

legend: {

data: e.legendData

},

toolbox: {

feature: {

saveAsImage: {}

}

},

xAxis: {

data: e.xData

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: e.serieData

}]

};

// 使用刚指定的配置项和数据显示图表。

columnar.setOption(option1);

},

error:function (e) {

layer.msg(e);

}

})

后台controller代码，返回json数据

@RequestMapping(value = "/columnar",method = RequestMethod.GET)

@ResponseBody

@ApiOperation("获取柱状图数据")

public ColumnarModel columnar(){

ColumnarModel columnarModel = new ColumnarModel();

columnarModel.setLegendData(new ArrayList(){{

add("销量");

}});

columnarModel.setTitle("销量");

columnarModel.setxData(new ArrayList(){{

add("衬衫");

add("羊毛衫");

add("雪纺衫");

add("裤子");

add("高跟鞋");

add("袜子");

}});

columnarModel.setSerieData(new ArrayList(){{

add(5);

add(20);

add(36);

add(10);

add(10);

add(20);

}});

return columnarModel;

}

/**

* 柱状图形model

*/

public class ColumnarModel {

/**

* 柱状图的标题

*/

private String title;

/**

* 顶部数据

*/

private List legendData;

/**

* 横坐标数据

*/

private List xData;

/**

* 柱状图上的具体数据

*/

private List serieData;