echarts圆柱形柱状图 源码_用echarts实现一个柱状图（前后台源码）

后台代码

-------------------------controller-------------------------------------

/**

*

人员结构-政治面貌

* @param request

* @param response

* @return

*/

@RequestMapping(value ="zzmm.do")

public String getZzmm(HttpServletRequest request, HttpServletResponse response) {

try {

HashMap2JsonWrite(response, szdwService.getZzmmResult(request));

} catch (Exception e) {

e.printStackTrace();

}

return null;

}

---------------------controller调用的方法--------------------------------------

public void HashMap2JsonWrite(HttpServletResponse response, HashMap map) throws IOException{

String result = Constants.HashMap2Json(map);

response.setCharacterEncoding("UTF-8");

response.getWriter().print(result);

response.getWriter().close();

}

/*

*

人员结构-政治面貌

* @param request

* @return

*/

-------------------------service接口及实现类-----------------------------------

HashMap getZzmmResult(HttpServletRequest request);

@Override

public HashMap getZzmmResult(HttpServletRequest request) {

HashMapret = new HashMap();

HashMapparam = new HashMap();

String title="教职工政治面貌";

String ident="zgmm";

List xmList = szdwMapper.getZzmmData(param);

OptionModel optionModel=CreatePublicOptionUtil

.makeBarOption(title, xmList, null, ident,

true, 0, false, true, true, true, "人", null, null);

optionModel.getOption().grid().top("15%").bottom("38%");

ret.put("option",GsonUtil.format(optionModel.getOption()));

return ret;

}

---------------------------图表工具类-----------------------------------------

@SuppressWarnings("rawtypes")

public static OptionModel makeBarOption(String title,List modelList,List oplengendListNew, String type,

Boolean xMandatoryDisplay,Integer angleRotation,Boolean isXyExchange,Boolean isStack, Boolean numFlag,

Boolean isNumformat, String axisName,String tjfs,String addCondition) {

OptionModel optionModel = new OptionModel();

Option option = new Option();

// 设置title

option.title().setX("left");

option.title().setY("10");

option.title(title);

// 设置坐标系网格

option.grid().y("70").y2("90").containLabel(true);

// 设置悬浮提示框

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

option.tooltip().axisPointer().type(PointerType.line);

// 设置工具箱,切换线性，柱状图

/*option.toolbox().show(true).feature(Tool.saveAsImage,Tool.myDetail)

.padding(10, 0, 5, 5);*/

option.setMyIdent(type);

// 设置图例

List oplengendList = new ArrayList();

List categoryAxisList = new ArrayList();

List dataList = new ArrayList();

LinkedHashMap xAxisMap = new LinkedHashMap();

if (modelList.size() > 0){

for (OptionDataModel xm : modelList) {

Boolean flag = true;

if (oplengendList.size() >= 1) {

for (int i = 0; i < oplengendList.size(); i++) {

if (oplengendList.get(i).equals(xm.getThreeAxis())) {

flag = false;

}

}

}

if (flag && xm.getThreeAxis() != null) {

oplengendList.add(xm.getThreeAxis());

}

if (!StringUtils.isEmpty(xm.getTwoAxis())

&& StringUtils.isEmpty(xAxisMap.get(xm.getTwoAxis()))) {

xAxisMap.put(xm.getTwoAxis(), xm.getTwoAxis());

}

}

Iterator iter = xAxisMap.entrySet().iterator();

while (iter.hasNext()) {

Map.Entry entry = (Map.Entry) iter.next();

categoryAxisList.add(entry.getKey().toString());

}

}

// 设置类目轴 x轴

CategoryAxis categoryAxis = new CategoryAxis();

categoryAxis.data(categoryAxisList.toArray());

//是否强制显示x轴标签

if(xMandatoryDisplay){

categoryAxis.axisLabel().interval(0);

}

//x轴标签是否旋转 旋转的角度

if(angleRotation != null){

categoryAxis.axisLabel().setRotate(angleRotation);

}

categoryAxis.boundaryGap(true);

if(oplengendListNew != null && oplengendListNew.size() > 0) {

oplengendList = oplengendListNew;

}

String serviceName= "总数";

if (numFlag && oplengendList.size() > 0) {

oplengendList.add(serviceName);

}

// 设置值轴

ValueAxis valueAxis = new ValueAxis();

valueAxis.splitLine().show(false);

valueAxis.name(axisName);

valueAxis.axisLine().lineStyle().width(1);

//xy轴互换

if(isXyExchange){

valueAxis.position("top");

option.xAxis(valueAxis);

option.yAxis(categoryAxis);

}else{

option.xAxis(categoryAxis);

option.yAxis(valueAxis);

}

if (modelList == null || modelList.size() < 1){

optionModel.setOption(option);

return optionModel;

}

// 默认设置饼图

List barList = new ArrayList();

// 增加折线图series

for (int i = 0; i < oplengendList.size(); i++) {

if (!serviceName.equals(oplengendList.get(i))) {

Bar bar = new Bar(oplengendList.get(i));

bar.type(SeriesType.bar);

bar.barMaxWidth(barMaxWidth);

dataList = new ArrayList();

for (int j = 0; j < categoryAxisList.size(); j++) {

for (OptionDataModel xm : modelList) {

if (!StringUtils.isEmpty(xm.getTwoAxis())

&& !StringUtils.isEmpty(categoryAxisList.get(j))

&& !StringUtils.isEmpty(xm.getThreeAxis())

&& !StringUtils.isEmpty(xm.getNum())

&& xm.getTwoAxis().equals(categoryAxisList.get(j))

&& xm.getThreeAxis().equals(oplengendList.get(i))

&& !serviceName.equals(categoryAxisList.get(j))) {

dataList.add(xm.getNum());

//添加查询条件

setQueryCriteria(type, tjfs, xm, addCondition);

}

}

if (dataList.size() < j + 1) {

dataList.add("0");

}

}

// 叠加图显示，对于同一列叠加图的stack相同

if (!isStack) {

bar.stack(i + "");

} else {

bar.stack("1");

}

bar.data(dataList.toArray());

bar.barCategoryGap("40%");

barList.add(bar);

}

}

// 增加总数折线图series

if (numFlag) {

Bar lineBar = new Bar(serviceName);

lineBar.stack("zxmc");

lineBar.type(SeriesType.line);

List lineDataList = new ArrayList();

for (String xd : categoryAxisList) {

float num = 0;

for (OptionDataModel xm : modelList) {

if (xd.equals(xm.getTwoAxis())) {

num += Float.parseFloat(xm.getNum());

}

}

if(isNumformat){

lineDataList.add((int)num+ "");

}else{

lineDataList.add(num + "");

}

num = 0;

}

lineBar.data(lineDataList.toArray());

lineBar.itemStyle().normal().color("rgb(255, 134, 26)");

lineBar.itemStyle().normal().label().position("top").show(true);

barList.add(lineBar);

}

option.series(barList);

option.legend(oplengendList.toArray());

option.legend().x("center").y("bottom");

optionModel.setOption(option);

//列表头 为 图表横轴数据

optionModel.setCategoryAxisList(categoryAxisList);

//行表头 为 图表图例数据

if(numFlag) oplengendList.remove(oplengendList.size() - 1);

optionModel.setYxList(oplengendList);

//数据源(带条件)

optionModel.setDataList(modelList);

return optionModel;

}

----------------dao层接口---------------------------

List getZzmmData(HashMap param);

-----------------sql语句----------------------------

SELECT RYLBMC AS twoAxis, COUNT(*) AS num, ZZMMMC AS threeAxis

FROM V_JZG_ZCJB WHERE (dqztm = '11' or dqztm = '04')

GROUP BY ZZMMMC, RYLBMC

前台

------------------------js页面--------------------------------------------------

var ZzmmEchart =echarts.init(document.getElementById('zzmm_echarts'));

$(function(){

zzmm();

});

/**

* 教职工政治面貌

*/

function zzmm(){

$.post("zzmm.do",function(data, textStatus, jqXHR){

var obj = eval('(' + data + ')');

ZzmmEchart.clear();

ZzmmEchart.setOption(eval('(' + obj.option + ')'));

});

}

-----------前台jsp页面---------------------

政治面貌