项目需求:因为不确定y轴折线具体数量,所以决定后台拼接
首先要在pom.xml文件中引入jar包
<!-- https://mvnrepository.com/artifact/com.github.abel533/ECharts -->
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>2.2.7</version>
</dependency>
js和jsp
这个没啥好说的,很简单
<div id="chartContainer" style="width: 100%; height:100%;">
</div>
function initComplete() {//初始化,js调用这个
//路径配置
require.config({paths : {echarts : '/static/echarts'}});
require([ 'echarts','echarts/chart/bar', 'echarts/chart/line'],DrawEChart);
}
function DrawEChart(echarts) {
var startTime = $("#startTime").datebox("getValue");
var endTime = $("#endTime").datebox("getValue");
var dev = $("#dev").combobox("getValue");
$.ajax({
type : "post",
cache : false,
url : "/reportForm/chartData",
dataType : "json",
data : {
"startTime":startTime,"endTime":endTime,"dev":dev
},
success : function(result) {
var psLineChar = echarts.init(document.getElementById('chartContainer'));
psLineChar.clear();
psLineChar.showLoading({text: '请稍等,正在加载...'});
psLineChar.setOption(result, true);
psLineChar.hideLoading();
},
error : function(errorMsg) {
alert("图表请求数据失败啦!");
}
});
}
controller层
/**
* 初始化option
* @param title 折线图标题
* @param unit y轴单位
* @return
*/
public Option initOption(String title,String unit){
Option option = new Option();
option.title(title);
option.tooltip().trigger(Trigger.axis);//坐标轴指示器
option.toolbox().x("right").y("center").orient(vertical).show(true).feature(Tool.dataView,
new MagicType(Magic.line, Magic.bar).show(true), Tool.restore, Tool.saveAsImage);//切换柱状图等摆放在右侧中间
option.calculable(true);
ValueAxis valueAxis = new ValueAxis();
//valueAxis.axisLabel().formatter("{value} 人");//y轴单位
valueAxis.axisLabel().formatter("{value} "+unit);
option.yAxis(valueAxis);
ItemStyle colorStyle = new ItemStyle();
colorStyle.normal().color("#E87C25");
return option;
}
一个折线
/**
* 查询某一个管道
* @param startTime
* @param endTime
* @param dev
* @param devlist
* @return
*/
public String chartDayDataOne(String startTime, String endTime, String dev, List<Dev> devlist){
List<Dev> list = reportFormService.getDayInfoNoPage(startTime,endTime,dev);
String devName = "";
for (Dev d :devlist) {
if(d.getDevId().equals(dev)){
devName = d.getDevName();
break;
}
}
Option option = initOption("日报表折线图","");
List<String> xDataList = new ArrayList<String>();
List<String> dDataList = new ArrayList<String>();
xDataList = DateUtils.forDayDateNoYear(startTime,endTime);
List<String> year = DateUtils.forDayDate(startTime, endTime);
int length=list.size();
for(String y: year) {
int i=0;
for ( i=0;i<length;i++) {
if(list.get(i).getRecDate().equals(y)){
dDataList.add(list.get(i).getDataValue());
break;
}
}
if(i==length){
dDataList.add("0");
}
}
option.legend().data(devName).setX("right");
int xsize=xDataList.size();
String[] xArray = (String[])xDataList.toArray(new String[xsize]);
int dsize=dDataList.size();
String[] dArray = (String[])dDataList.toArray(new String[dsize]);
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.boundaryGap(true);
AxisLabel axisLabel = new AxisLabel();
axisLabel.setRotate(60);//设置x轴文字旋转
categoryAxis.data(xArray).setAxisLabel(axisLabel);
option.xAxis(categoryAxis);
Line line1 = new Line();//折线1
line1.name(devName);
line1.data(dArray);
option.series(line1);//折线放入
Gson gson = new Gson();
String json = gson.toJson(option);
return json;
}
如果是2个条折线可以继续往下看
/**
* 查询所有的管道(2个)
* @param startTime
* @param endTime
* @param dev
* @param devlist
* @return
*/
public String chartDayDataAll(String startTime, String endTime, String dev, List<Dev> devlist){
String ID1 = devlist.get(0).getDevId();
String ID2 = devlist.get(1).getDevId();
List<Dev> list1 = reportFormService.getDayInfoNoPage(startTime,endTime,ID1);
List<Dev> list2 = reportFormService.getDayInfoNoPage(startTime,endTime,ID2);
Option option = initOption("日报表折线图","");
List<String> xDataList = new ArrayList<String>();
List<String> dDataList = new ArrayList<String>();
List<String> dDataList2 = new ArrayList<String>();
xDataList = DateUtils.forDayDateNoYear(startTime,endTime);
List<String> year = DateUtils.forDayDate(startTime, endTime);
//两个for循环
int length1=list1.size();
int length2=list2.size();
for(String y: year) {
int i=0;
for ( i=0;i<length1;i++) {
if(list1.get(i).getRecDate().equals(y)&&list1.get(i).getDevId().equals(ID1)){
dDataList.add(list1.get(i).getDataValue());
break;
}
}
if(i==length1){
dDataList.add("0");
}
}
for(String y: year) {
int i=0;
for ( i=0;i<length2;i++) {
if(list2.get(i).getRecDate().equals(y)&&list2.get(i).getDevId().equals(ID2)){
dDataList2.add(list2.get(i).getDataValue());
break;
}
}
if(i==length2){
dDataList2.add("0");
}
}
//
option.legend().data("管道一","管道二").setX("right");
int xsize=xDataList.size();
String[] xArray = (String[])xDataList.toArray(new String[xsize]);
int dsize=dDataList.size();
String[] dArray = (String[])dDataList.toArray(new String[dsize]);
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.boundaryGap(true);
AxisLabel axisLabel = new AxisLabel();
axisLabel.setRotate(60);
categoryAxis.data(xArray).setAxisLabel(axisLabel);
option.xAxis(categoryAxis);
Line line1 = new Line();
line1.name("管道一");
line1.data(dArray);
option.series(line1);
Line line2 = new Line();
int dsize2=dDataList.size();
String[] dArray2 = (String[])dDataList2.toArray(new String[dsize2]);
line2.data(dArray2);
line2.name("管道二");
option.series(line2);
Gson gson = new Gson();
String json = gson.toJson(option);
return json;
}
最后,调用的时候,这样就可以实现动态一条或者两条,而不是固定的
/**
* 折线图
* @param request
* @return
*/
@RequestMapping(value = "chartDayData")
@ResponseBody
public String chartDayData(HttpServletRequest request){
String startTime = request.getParameter("startTime");
String endTime = request.getParameter("endTime");
String dev = request.getParameter("dev");
List<Dev> devlist = reportFormService.devList(factId);
if(dev==""&&devlist.size()==2){
return chartDayDataAll(startTime,endTime,dev,devlist);
}else{
return chartDayDataOne(startTime,endTime,dev,devlist);
}
}