echarts—拥有2个横坐标相互对应（模块与专业）

         从 10月22号组长安排活儿，到现在一周半的时间，开发这样一个功能：读取Excel中指定的行与列，以图形化的形式展现给用户。

具体需求：

         用户每天会登录系统填报今天的日报，而我需要做的是从今天的日报中读取指定行与列存入数据库，并以图形化形式展现给用户。其中包含两列：36个专业和9个模块，每种专业从属于一种模块。

  


       我和同事彭捷一起开发，他负责前期前台展示（特别厉害），我负责后台取值，后期又在彭捷的基础上增加了模块名称（图形上面的红色部分）。

          需求：

      1、 柱子的颜色与专业和模块相对应

      2、生产资源显示其他的值，而非百分

      3、显示36个专业，同时显示9个模块

   一、实体         

    1、专业 

<span style="font-size:14px;">	@Entity
@Table(name="DAYRECORDINFO")
public class DayRecordInfo {
private Long id;
private String fileName;  //excel文件名称
private String template;  //所属模版
private String majorName; //专业名称
private String templateName; //模版名称
private String kaiLeiValue;  //开累数量
private String baiFenBiValue; //百分比
private Long departmentID; //建设单位id
private String unit;   //单位
private String designValue;	//设计数量
private String fileDate;	//文件日期

@Id
@TableGenerator(name = "rails_tab_pk", table = "PBS_PKS_TABLE", pkColumnName = "G_KEY", pkColumnValue = "DOCUMENT_ATTACHMENTS_PK", valueColumnName = "G_VALUE", allocationSize = 1)
@GeneratedValue(strategy = GenerationType.TABLE, generator = "rails_tab_pk")
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
@Column(name="FILENAME")
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}

@Column(name="TEMPLATE")
public String getTemplate() {
return template;
}
public void setTemplate(String template) {
this.template = template;
}
@Column(name="MAJORNAME")
public String getMajorName() {
return majorName;
}
public void setMajorName(String majorName) {
this.majorName = majorName;
}

@Column(name="TEMPLATENAME")
public String getTemplateName() {
return templateName;
}
public void setTemplateName(String templateName) {
this.templateName = templateName;
}

@Column(name="KAILEVALUE")
public String getKaiLeiValue() {
return kaiLeiValue;
}
public void setKaiLeiValue(String kaiLeiValue) {
this.kaiLeiValue = kaiLeiValue;
}

@Column(name="BAIFENBIVALUE")
public String getBaiFenBiValue() {
return baiFenBiValue;
}
public void setBaiFenBiValue(String baiFenBiValue) {
this.baiFenBiValue = baiFenBiValue;
}

@Column(name="DEPARTMENTID")
public Long getDepartmentID() {
return departmentID;
}
public void setDepartmentID(Long departmentID) {
this.departmentID = departmentID;
}

@Column(name="UNIT")
public String getUnit() {
return unit;
}
public void setUnit(String unit) {
this.unit = unit;
}
@Column(name="DESIGNVALUE")
public String getDesignValue() {
return designValue;
}
public void setDesignValue(String designValue) {
this.designValue = designValue;
}

@Column(name="FILEDATE")
public String getFileDate() {
return fileDate;
}
public void setFileDate(String fileDate) {
this.fileDate = fileDate;
}
}
</span>

    2、模块

/**
* 模块
* @author Administrator
*
*/
public class RecordModule {
private Integer index;  //索引
private String name;	//模块名称
private List<DayRecordInfo> dayRecordInfos;	//模块包含的专业

public Integer getIndex() {
return index;
}
public void setIndex(Integer index) {
this.index = index;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<DayRecordInfo> getDayRecordInfos() {
return dayRecordInfos;
}
public void setDayRecordInfos(List<DayRecordInfo> dayRecordInfos) {
this.dayRecordInfos = dayRecordInfos;
}
}

二、Action

/**
* 显示每日记录
*
* @return
*/
public String show() {
String template="showImageTemplateVersionThree";

// ==============================数据库中获取当天36个专业的信息============================
List<DayRecordInfo> listAllMajor = new ArrayList<DayRecordInfo>();
listAllMajor=recordImageManager.checkDayRecord(template);

if(listAllMajor.size()>0){
Set<String> moduleNames = new LinkedHashSet<String>();
for(int i = 0; i < listAllMajor.size(); i++ ){
moduleNames.add(listAllMajor.get(i).getTemplateName());
}

System.out.println(moduleNames);

List<RecordModule> moduleList = new ArrayList<RecordModule>();
List<Integer> majorNums = new ArrayList<Integer>();

//遍历所有的模块及专业，记录相应的模块下包含哪些专业
int i = 0;
int maxPr = 0;
for (String moduleName : moduleNames) {
i ++;
RecordModule module = new RecordModule();
module.setName(moduleName);
List<DayRecordInfo> mjList = new ArrayList<DayRecordInfo>();

int count = 0;
for (DayRecordInfo dayRecordInfo : listAllMajor) {
if(dayRecordInfo.getTemplateName().equals("生产资源")){
//System.out.println("开累:"+major.getKailei());
maxPr = Integer.valueOf(dayRecordInfo.getKaiLeiValue()) > maxPr
? Integer.valueOf(dayRecordInfo.getKaiLeiValue()) : maxPr;
}
if(dayRecordInfo.getTemplateName().equals(moduleName)){
mjList.add(dayRecordInfo);
count ++;
}
}
majorNums.add(count);

module.setIndex(i);
module.setDayRecordInfos(mjList);
moduleList.add(module);
}

//初始化几种颜色
String[] colors = new String[]{"#C1232B", "#B5C334","#FCCE10", "#E87C25", "#27727B",
"#FE8463", "#9BCA63", "#FAD860",
"#F3A43B", "#60C0DD", "#D7504B",
"#C6E579", "#F4E001", "#F0805A","#26C0C0" };

List<String> persentList = new ArrayList<String>();
List<String> kaileiList = new ArrayList<String>();
List<String> colorList = new ArrayList<String>();
List<String> majorNames = new ArrayList<String>();
List<String> unitList=new ArrayList<String>();
List<String> designList=new ArrayList<String>();

//如果模块名称为生产资源则将其开累值放到百分比集合中
for (RecordModule module : moduleList) {
for (DayRecordInfo dayRecordInfo : module.getDayRecordInfos()) {
colorList.add(colors[module.getIndex()]);
if(dayRecordInfo.getTemplateName().equals("生产资源")){
persentList.add(Double.valueOf(dayRecordInfo.getKaiLeiValue())/maxPr*100+"");
}else{
persentList.add(dayRecordInfo.getBaiFenBiValue());
}
kaileiList.add(dayRecordInfo.getKaiLeiValue());
majorNames.add(dayRecordInfo.getMajorName());
unitList.add(dayRecordInfo.getUnit());
designList.add(dayRecordInfo.getDesignValue());
}
}

//转json并放到栈顶
ActionContext.getContext().put("persentList", JSONArray.fromObject(persentList,MyJSONObject.jsonConfig).toString());
ActionContext.getContext().put("kaileiList", JSONArray.fromObject(kaileiList,MyJSONObject.jsonConfig).toString());
ActionContext.getContext().put("colorList", JSONArray.fromObject(colorList).toString());
ActionContext.getContext().put("majorNames", JSONArray.fromObject(majorNames).toString());
ActionContext.getContext().put("majorNums", JSONArray.fromObject(majorNums).toString());
ActionContext.getContext().put("moduleNames", JSONArray.fromObject(moduleNames).toString());
ActionContext.getContext().put("maxPr", JSONArray.fromObject(maxPr).toString());
ActionContext.getContext().put("unitList",JSONArray.fromObject(unitList).toString());
ActionContext.getContext().put("designList",JSONArray.fromObject(designList).toString());

System.out.println(JSONArray.fromObject(majorNums).toString());
System.out.println(unitList);
}
return "view";

}

三、jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/rails.jsp"%>
<%@ include file="/theme/theme.jsp"%>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="center" style="width:1400px; height:700px;”></">
<div id="main" style="height:270px; width: 1300px; overflow: auto;"></div>
<div id="mainTemplate" style="height:100px; width: 1300px; overflow: auto;padding-top:1px"></div>
</div>
</body>
</html>
<script src="${ctx}/js/echarts/build/dist/echarts.js"></script>
<script>
moduleNames = new Array();
moduleNames = ${moduleNames};

persentList = new Array();
persentList = ${persentList};

kaileiList = new Array();
kaileiList = ${kaileiList};

majorNames = new Array();
majorNames = ${majorNames};

colorsList = new Array();
colorList = ${colorList};

majorNums = new Array();
majorNums = ${majorNums};

unitList=new Array();
unitList=${unitList};

designList=new Array();
designList=${designList};

//初始化数据
maxPr = ${maxPr};

indexCount = 0;
total = 0;
moduleNamesNew = new Array();

var mIndex = Number(majorNums[0])-1;

var indexCount1 = 1;
for (var i = 0; i < majorNames.length; i++) {
if (mIndex == i) {
//从这个坐标开始需要转换名称
mIndex += Number(majorNums[indexCount1]);

moduleNamesNew.push(moduleNames[indexCount1-1]);   //模板名称
indexCount1++;
} else {
moduleNamesNew.push(moduleNames[indexCount1-1]);
}
}

var date = new Date();
var nowDate =" ("+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日)";

// 路径配置
require.config({
paths : {
echarts : '${ctx}/js/echarts/build/dist'
}
});

require(
[ 'echarts', 'echarts/chart/bar'  // 使用柱状图就加载bar模块，按需加载
],
DrawCharts);

function DrawCharts(ec){
DrawCenterImage(ec);
DrawTemplate(ec);
}

function DrawCenterImage(ec){
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
option = {
title : {
x : 'center',
text : '京沈辽宁每日简报'+nowDate,
},
tooltip : {
trigger : 'item',
formatter : function(params) {
return majorNames[params.dataIndex] + '<br/>'+" 单位："
+ unitList[params.dataIndex]+'<br/>'
+ " 设计: "+ designList[params.dataIndex] +'<br/>'
+ " 开累: "+ kaileiList[params.dataIndex] +'<br/>'
+ " 百分比: " + Number(persentList[params.dataIndex]).toFixed(0)
+ "%";
}
},
toolbox : {
show : false
},
calculable : false,
grid : {
borderWidth : 0,
x2 : 0,
y2 : 0,
},
legend : {
x : 80,
show : false,
data : moduleNames,
itemGap : 20,
formatter : function(name) {
//console.log(name);
}
},

xAxis : [ {
position : 'top',
type : 'category',
show : true,
axisLabel : {
margin:120,
show : true,
rotate :0,
margin:2,
textStyle:{
color:"red",
fontSize:14,
fontWeight:'bolder',
},
interval : function(index, xAxisDataIndex) {
/* console.log("index:"+index+";total"+total+";indexCount"+indexCount); */
if (index == total) {
total += Number(majorNums[indexCount]);
indexCount++;
return true;
} else if(index+1 == total) {
return false;
}
},
formatter : function(value) {
var res='';
if(value=="生产资源" || value=="临建工程" || value=="隧道工程"){
//含6个空格
res='　　　　　　';
res+=value;
}else if(value=="路基工程" || value=="桥梁工程"){
//含10个空格
res='　　　　　　　　　　　　　　　　　';
res+=value;
}else{
res=value;
}
return res;
}
},
axisLine : {
show : false,
},
axisTick : {
show : false,
},
splitLine : {
show : false,
},
data : moduleNamesNew,
} ],
yAxis : [ {
type : 'value',
show : true,
} ],

series : [ {
//name : '开累完成量',
itemStyle : {
normal : {
color : function(params) {
return colorList[params.dataIndex];
},
label : {
position: 'inside',
show : true,
formatter : function(param){
if(param.name == "生产资源"){
var rs = maxPr * Number(param.value) / 100;
return rs.toFixed(0);
}else{
return param.value+"%";
}
}
}
}
},
type : 'bar',
data : persentList,
} ]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
function DrawTemplate(ec){
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('mainTemplate'));
option = {
grid : {
borderWidth : 0,
x2 : 0,
y2 : 0,
},
xAxis : [ {
position:'top',
axisLabel : {
baseline:'middle',
rotate :45,
margin:2,
formatter : function(value) {
return value;
}
},
axisLine : {
show : false,
},
axisTick : {
show : false,
},
splitLine : {
show : false,
},
data : majorNames,
} ],

series : [ {
data : persentList,
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
</script>

注：

      模块名称现在还是写死的，位置并未相对于本模块内的所有专业对齐

      两个横坐标的实现思路：将柱状图的很坐标模块名称放在图形顶部，再重新构建一个新的柱状图只显示36个专业（通过坐标和文字旋转，将两个图形一一对应）

小结：

            第一版做的时候无法同时显示模块名称与专业，由于echarts无法同时显示两个坐标，但用户又要求同时显示专业和模块。当时那个无助，不知道怎么去实现，问了大牛彭捷，彭捷直接就回绝了（别的可以，这个做不了），那怎么办！查资料的时候突然看到横坐标可以置顶就想到了再创建一个只有横坐标的柱状图，虽然办法看起来笨笨的，但是满足了用户需求，还是蛮欣慰的。做这个功能时，因为各方面原因，有些急躁了，没有好好去想办法解决这个问题。最后在用户和组长的强烈要求下，我也也一步步实现了用户要求的想法，万事不要着急，多去思考。