echar linestyle 实体_ssh结合echarts做图表展示

在日常的开发中，我们常常需要使用图表对数据进行展示，在这里作者使用百度的开源图表echarts动态的展示数据。

看过echarts的API都知道，要想使用某种类型的图表展示数据，必须封装好一个JSON对象返回给前台做相应的处理。在这里推荐一个echart对应的实体依赖。在pom.xml中引入

com.github.abel533

ECharts

3.0.0.2

然后在controller封装一个echarts所需的option返回给前端，在这里从数据库的提取的过程部分的代码我就不写了。数据库就简单的两列属性【年份、金额】。在这里贴出代码，相信很多小伙伴还是明白滴，不明白的可以留言哦，我看到会一一回复的。

private void setData(){

yearList = new ArrayList<>();

amountList = new ArrayList<>();

List gdpList = gdpService.selectList(new EntityWrapper());

for (Gdp gdp:gdpList) {

yearList.add(gdp.getYear());

amountList.add(gdp.getAmount());

}

}

/**

* 柱状图

*/

@RequestMapping("/bar_chart")

@ResponseBody

public String barChart(){

setData();

Option option = new Option();

option.title().text("中华人民共和国国内生产总值(GDP)").subtext("纯属虚构");

option.tooltip().trigger(Trigger.axis);

option.legend("万亿元");

option.toolbox().show(true).feature(Tool.mark, Tool.dataView,

new MagicType(Magic.line, Magic.bar).show(true), Tool.restore, Tool.saveAsImage);

option.calculable(true);

option.xAxis(new CategoryAxis().data(yearList.toArray()));

option.yAxis(new ValueAxis());

Bar bar = new Bar("万亿元");

bar.data(amountList.toArray());

bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"),

new PointData().type(MarkType.min).name("最小值"));

bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));

option.series(bar);

return JSON.toJSONString(option);

}

然后前端发起ajax请求，获取option对象并显示。

柱状图

.wrapper{ min-height:100%; height:auto !important; height:100%; margin:0 auto -155px}

.footer,.push{ height:155px}

table.gridtable{ font-family:verdana,arial,sans-serif; font-size:11px;

color:#333; border-width:1px; border-color:#666;

border-collapse:collapse; margin:5px auto}

table.gridtable th{ border-width:1px; padding:8px; border-style:solid;

border-color:#666; background-color:#dedede}

table.gridtable td{ border-width:1px; padding:8px; border-style:solid;

border-color:#666; background-color:#fff}

.middle{ text-align:center; margin:0 auto; width:90%; height:auto}

.info{ font-size:12px; text-align:center; line-height:20px; padding:40px}

.info a{ margin:0 10px; text-decoration:none; color:green}

window.onload = function(){

$.ajax({

type: "post",

url: "${ctx}/gdp/bar_chart",

dataType: "json",

async: false,

success: function (data) {

var option = eval("("+data+")");

// theme 来源于 macarons.js

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

myChart.setOption(option);

}

})

}