用echarts實現一個柱狀圖(前後臺原始碼)
後臺程式碼
-------------------------controller-------------------------------------
/**
* <p>人員結構-政治面貌</p>
* @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<String, Object> map) throws IOException{
String result = Constants.HashMap2Json(map);
response.setCharacterEncoding("UTF-8");
response.getWriter().print(result);
response.getWriter().close();
}
/*
* <p>人員結構-政治面貌</p>
* @param request
* @return
*/
-------------------------service介面及實現類-----------------------------------
HashMap<String, Object> getZzmmResult(HttpServletRequest request);
@Override
public HashMap<String, Object> getZzmmResult(HttpServletRequest request) {
HashMap<String,Object>ret = new HashMap<String,Object>();
HashMap<String,Object>param = new HashMap<String,Object>();
String title="教職工政治面貌";
String ident="zgmm";
List<OptionDataModel> 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<OptionDataModel> modelList,List<String> 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<String> oplengendList = new ArrayList<String>();
List<String> categoryAxisList = new ArrayList<String>();
List<String> dataList = new ArrayList<String>();
LinkedHashMap<String, String> xAxisMap = new LinkedHashMap<String, String>();
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<Series> barList = new ArrayList<Series>();
// 增加折線圖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<String>();
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<String> lineDataList = new ArrayList<String>();
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<OptionDataModel> getZzmmData(HashMap<String, Object> param);
-----------------sql語句----------------------------
<select id="getZzmmData" parameterType="HashMap" resultType="OptionDataModel">
SELECT RYLBMC AS twoAxis, COUNT(*) AS num, ZZMMMC AS threeAxis
FROM V_JZG_ZCJB WHERE (dqztm = '11' or dqztm = '04')
GROUP BY ZZMMMC, RYLBMC
</select>
前臺
------------------------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頁面---------------------
<div class="mui-table-view">
<div class="mui-table-view-cell">
<p class="sm-title"><span>政治面貌</span></p>
<div class="chart" id="zzmm_echarts" style="height:500px"></div>
</div>
</div>
<script type="text/javascript" src="static/js/szdw/ryjgIndex.js"></script>