引入echarts
<script src="../../static/echarts.js"></script>
先在页面定义一个div
<div class="layui-col-xs6">
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="columnar" style="width: 600px;height:400px;"></div>
<!--在这里加上一些文字描述-->
</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<String>(){{
add("销量");
}});
columnarModel.setTitle("销量");
columnarModel.setxData(new ArrayList<String>(){{
add("衬衫");
add("羊毛衫");
add("雪纺衫");
add("裤子");
add("高跟鞋");
add("袜子");
}});
columnarModel.setSerieData(new ArrayList<Integer>(){{
add(5);
add(20);
add(36);
add(10);
add(10);
add(20);
}});
return columnarModel;
}
/**
* 柱状图形model
*/
public class ColumnarModel {
/**
* 柱状图的标题
*/
private String title;
/**
* 顶部数据
*/
private List<String> legendData;
/**
* 横坐标数据
*/
private List<String> xData;
/**
* 柱状图上的具体数据
*/
private List<Integer> serieData;
网友评论