多折线动态图
话不多说，先上代码
页面代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<head>
<title>多折线动态统计图</title>
</head>
<body>
开始日期<input type="date" name="btime" id="btime"/>
结束日期<input type="date" name="etime" id="etime"/><input type="button" onclick="shaixuan()" value="查询"/>
<div id="chartmain" style="width:80%; height:80%; margin-top:50px;"></div>
<script type="text/javascript">
$(function(){
//初始化，月初到现在的
$.ajax({
type:'post',
url:'/moreline',
data:{}
dataType:'json',
success:function(result){
if(result=="error"){
alert("程序出现问题，请与管理员联系！");
return false;
}else{
var ll = [];//图例
var tmp = [];//数值
var date = [];//日期
$.each(result,function(){
var setLegend = this.categories;
var data = this.vals;
var setDate = this.labels;
$.each(setLegend,function(i){
ll.push(setLegend[i]);//图例获取
});
$.each(setDate,function(i){
date.push(setDate[i]);//日期获取
});
//值获取
for (var int = 0; int < setLegend.length; int++) {
var tmpVal = {
name : setLegend[int],
type : 'line',
smooth : true,
showSymbol : true,
data : data[int]
};
tmp[int] = tmpVal;
}
});
var myChart = echarts.init(document.getElementById('chartmain'));
var option = {
title: {
text: '阻断申请命中率'
},
toolbox: {
show : true,//是否显示工具栏组件
showTitle:true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
//orient : 'vertical',
feature : {
mark : {show: true},
dataView : {
show: true,
readOnly: false,
show: true, //是否显示该工具。
title:"数据视图",
readOnly: false, //是否不可编辑（只读）
lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']
backgroundColor:"#fff", //数据视图浮层背景色。
textareaColor:"#fff", //数据视图浮层文本输入区背景色
textareaBorderColor:"#333", //数据视图浮层文本输入区边框颜色
textColor:"#000", //文本颜色。
buttonColor:"#c23531", //按钮颜色。
buttonTextColor:"#fff" //按钮文本颜色。
},
restore : {show: true},
saveAsImage : {show: true},
magicType: { //动态类型切换
show: true,
title:"切换", //各个类型的标题文本，可以分别配置。
type: ['line', 'bar'] //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
}
}
},
tooltip: {
trigger: 'axis'
},
legend: {
top:'10%',
x: 'right',//居右显示
orient: 'vertical', //垂直显示
y: 'center', //延Y轴居中
data:ll
},
grid: {
left: '3%',
right: '15%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
type: 'value',
name: '命中占比',
axisLabel: {
formatter: '{value} %'
}
},
series: tmp }
myChart.setOption(option);
return true;
}
}
});
});
//根据日期筛选显示
function shaixuan(){
var startDate = $("#btime").val();
var endDate = $("#etime").val();
$.ajax({
type:'post',
url:'/moreline',
data:{
startDate : startDate,
endDate : endDate,
},
dataType:'json',
success:function(result){
if(result=="error"){
alert("程序出现问题，请与管理员联系！");
return false;
}else{
var ll = [];//图例
var tmp = [];//数值
var date = [];//日期
$.each(result,function(){
var setLegend = this.categories;
var data = this.vals;
var setDate = this.labels;
$.each(setLegend,function(i){
ll.push(setLegend[i]);
});
$.each(setDate,function(i){
date.push(setDate[i]);
});
for (var int = 0; int < setLegend.length; int++) {
var tmpVal = {
name : setLegend[int],
type : 'line',
smooth : true,
showSymbol : true,
/*label : {
normal : {
position : 'right',
formatter : '{b}'//
}
},*/
data : data[int]
};
tmp[int] = tmpVal;
}
});
var myChart = echarts.init(document.getElementById('chartmain'));
var option = {
title: {
text: '阻断申请命中率'
},
toolbox: {
show : true,//是否显示工具栏组件
showTitle:true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
//orient : 'vertical',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false,
show: true, //是否显示该工具。
title:"数据视图",
readOnly: false, //是否不可编辑（只读）
lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']
backgroundColor:"#fff", //数据视图浮层背景色。
textareaColor:"#fff", //数据视图浮层文本输入区背景色
textareaBorderColor:"#333", //数据视图浮层文本输入区边框颜色
textColor:"#000", //文本颜色。
buttonColor:"#c23531", //按钮颜色。
buttonTextColor:"#fff", //按钮文本颜色。
},
restore : {show: true},
saveAsImage : {show: true},
magicType: { //动态类型切换
show: true,
title:"切换", //各个类型的标题文本，可以分别配置。
type: ['line', 'bar'], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
},
}
},
tooltip: {
trigger: 'axis'
},
legend: {
top:'10%',
x: 'right',//居右显示
orient: 'vertical', //垂直显示
y: 'center', //延Y轴居中
data:ll
},
grid: {
left: '3%',
right: '15%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
/* axisLabel : {
interval : 0,// 横轴信息全部显示
rotate : -30
// -30度角倾斜显示
},*/
data: date
},
yAxis: {
type: 'value',
name: '命中占比',
axisLabel: {
formatter: '{value} %'
}
},
series: tmp
}
myChart.setOption(option);
return true;
}
}
});
}
</script>
Controller代码
@Controller
public class LineTestController {
@Resource
private LineTestService lineTestService;
/**
* 页面跳转
* @return
*/
@RequestMapping("change")
public String change(){
return "lineTest";//此处为jsp页面
}
@RequestMapping("moreline")
@ResponseBody
public Object moreLine(LineTest lineTest){
Object map=lineTestService.moreLine(lineTest);
String result = null;
result = JSONArray.fromObject(map).toString();
System.out.println(result);
return result;
}
Service层代码
敲黑板！！Google Guava一定要引包
这里用到了两个工具类，用来格式化日期和数据
@Service
public class LineTestServiceImpl implements LineTestService {
@Resource
private LineTestDao lineTestDao;
@Override
public Object moreLine(LineTest lineTest) {
String[] dateList;
List<Map> data = new ArrayList<Map>();
Calendar cale = null;
Map map = new HashMap();
cale = Calendar.getInstance();
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
String firstday, lastday;
// 获取前月的第一天
cale = Calendar.getInstance();
cale.add(Calendar.MONTH, 0);
cale.set(Calendar.DAY_OF_MONTH, 1);
firstday = format.format(cale.getTime());
Date d = new Date();
System.out.println(d);
String nowDay = format.format(d);
LineDataUtil lineInstance = new LineDataUtil();
//Google Guava Table 强大的集合类 Table<行，列，值> 注意。。引包
Table<Object,Object, Object> echarsList = HashBasedTable.create();
//echarts初始化，判断筛选日期是否传值；1：未传值，查询月初到现在，2：有筛选日期按照筛选日期来
if(StringUtils.isNotBlank(lineTest.getStartDate())&&StringUtils.isNotBlank(lineTest.getEndDate())){
dateList = DateUtil.getEveryDay(lineTest.getStartDate(),lineTest.getEndDate());// 获取日期
data = lineTestDao.lineList(lineTest);
}else{
lineTest.setStartDate(firstday);
lineTest.setEndDate(nowDay);
dateList = DateUtil.getEveryDay(firstday,nowDay);// 获取日期
data = lineTestDao.lineList(lineTest);
}
//按照行列取值 注意！！！日期格式；类型一定为String，数据库同步！！！这是一个大坑
for (int i = 0; i < data.size(); i++) {
echarsList.put(data.get(i).get("dt"), data.get(i).get("rule_name"),data.get(i).get("nvl"));//在Table中添加行，列，值
String rule_name=data.get(i).get("rule_name").toString();
if (!lineInstance.getCategories().contains(rule_name)) {
lineInstance.addCategory(rule_name);//添加图例
}
}
for (String date : dateList) {
lineInstance.addLabel(date); //添加x轴 日期
}
Object[] arr = null;
for (String sn : lineInstance.getCategories()) {
arr=new String[dateList.length];
for (int i=0;i<dateList.length;i++) {
arr[i]=echarsList.get(dateList[i], sn);//Table get方法 返回对应于给定的行和列键，如果没有这样的映射存在值，返回null
}
lineInstance.addValList(arr);//填充数据
}
return lineInstance;
}
}
日期格式化
public class DateUtil {
// 默认日期格式
public static final String DATE_DEFAULT_FORMAT = "yyyy-MM-dd";
// 默认时间格式
public static final String DATETIME_DEFAULT_FORMAT = "yyyy-MM-dd HH:mm:ss";
public static final String TIME_DEFAULT_FORMAT = "HH:mm:ss";
// 日期格式化
private static DateFormat dateFormat = null;
// 时间格式化
private static DateFormat dateTimeFormat = null;
private static DateFormat timeFormat = null;
private static Calendar gregorianCalendar = null;
static {
dateFormat = new SimpleDateFormat(DATE_DEFAULT_FORMAT);
dateTimeFormat = new SimpleDateFormat(DATETIME_DEFAULT_FORMAT);
timeFormat = new SimpleDateFormat(TIME_DEFAULT_FORMAT);
gregorianCalendar = new GregorianCalendar();
}
/**
* 日期格式化yyyy-MM-dd
*
* @param date
* @return
*/
public static Date formatDate(String date, String format) {
try {
return new SimpleDateFormat(format).parse(date);
} catch (ParseException e) {
e.printStackTrace();
}
return null;
}
/**
* 日期格式化yyyy-MM-dd
*
* @param date
* @return
*/
public static String getDateFormat(Date date) {
return dateFormat.format(date);
}
/**
* 日期格式化yyyy-MM-dd HH:mm:ss
*
* @param date
* @return
*/
public static String getDateTimeFormat(Date date) {
return dateTimeFormat.format(date);
}
/**
* 时间格式化
*
* @param date
* @return HH:mm:ss
*/
public static String getTimeFormat(Date date) {
return timeFormat.format(date);
}
/**
* 日期格式化
*
* @param date
* @param 格式类型
* @return
*/
public static String getDateFormat(Date date, String formatStr) {
if (StringUtils.isNotBlank(formatStr)) {
return new SimpleDateFormat(formatStr).format(date);
}
return null;
}
/**
* 日期格式化
*
* @param date
* @return
*/
public static Date getDateFormat(String date) {
try {
return dateFormat.parse(date);
} catch (ParseException e) {
e.printStackTrace();
}
return null;
}
/**
* 时间格式化
*
* @param date
* @return
*/
public static Date getDateTimeFormat(String date) {
try {
return dateTimeFormat.parse(date);
} catch (ParseException e) {
e.printStackTrace();
}
return null;
}
/**
* 获取当前日期(yyyy-MM-dd)
*
* @param
* @return
*/
public static Date getNowDate() {
return DateUtil.getDateFormat(dateFormat.format(new Date()));
}
/**
* 获取当前日期星期一日期
*
* @return date
*/
public static Date getFirstDayOfWeek() {
gregorianCalendar.setFirstDayOfWeek(Calendar.MONDAY);
gregorianCalendar.setTime(new Date());
gregorianCalendar.set(Calendar.DAY_OF_WEEK, gregorianCalendar.getFirstDayOfWeek()); // Monday
return gregorianCalendar.getTime();
}
/**
* 获取当前日期星期日日期
*
* @return date
*/
public static Date getLastDayOfWeek() {
gregorianCalendar.setFirstDayOfWeek(Calendar.MONDAY);
gregorianCalendar.setTime(new Date());
gregorianCalendar.set(Calendar.DAY_OF_WEEK, gregorianCalendar.getFirstDayOfWeek() + 6); // Monday
return gregorianCalendar.getTime();
}
/**
* 获取日期星期一日期
*
* @param date
* @return date
*/
public static Date getFirstDayOfWeek(Date date) {
if (date == null) {
return null;
}
gregorianCalendar.setFirstDayOfWeek(Calendar.MONDAY);
gregorianCalendar.setTime(date);
gregorianCalendar.set(Calendar.DAY_OF_WEEK, gregorianCalendar.getFirstDayOfWeek()); // Monday
return gregorianCalendar.getTime();
}
/**
* 获取日期星期一日期
*
* @param date
* @return date
*/
public static Date getLastDayOfWeek(Date date) {
if (date == null) {
return null;
}
gregorianCalendar.setFirstDayOfWeek(Calendar.MONDAY);
gregorianCalendar.setTime(date);
gregorianCalendar.set(Calendar.DAY_OF_WEEK, gregorianCalendar.getFirstDayOfWeek() + 6); // Monday
return gregorianCalendar.getTime();
}
/**
* 获取当前月的第一天
*
* @return date
*/
public static Date getFirstDayOfMonth() {
gregorianCalendar.setTime(new Date());
gregorianCalendar.set(Calendar.DAY_OF_MONTH, 1);
return gregorianCalendar.getTime();
}
/**
* 获取当前月的最后一天
*
* @return
*/
public static Date getLastDayOfMonth() {
gregorianCalendar.setTime(new Date());
gregorianCalendar.set(Calendar.DAY_OF_MONTH, 1);
gregorianCalendar.add(Calendar.MONTH, 1);
gregorianCalendar.add(Calendar.DAY_OF_MONTH, -1);
return gregorianCalendar.getTime();
}
/**
* 获取指定月的第一天
*
* @param date
* @return
*/
public static Date getFirstDayOfMonth(Date date) {
gregorianCalendar.setTime(date);
gregorianCalendar.set(Calendar.DAY_OF_MONTH, 1);
return gregorianCalendar.getTime();
}
/**
* 获取指定月的最后一天
*
* @param date
* @return
*/
public static Date getLastDayOfMonth(Date date) {
gregorianCalendar.setTime(date);
gregorianCalendar.set(Calendar.DAY_OF_MONTH, 1);
gregorianCalendar.add(Calendar.MONTH, 1);
gregorianCalendar.add(Calendar.DAY_OF_MONTH, -1);
return gregorianCalendar.getTime();
}
/**
* 获取日期前一天
*
* @param date
* @return
*/
public static Date getDayBefore(Date date) {
gregorianCalendar.setTime(date);
int day = gregorianCalendar.get(Calendar.DATE);
gregorianCalendar.set(Calendar.DATE, day - 1);
return gregorianCalendar.getTime();
}
/**
* 获取日期后一天
*
* @param date
* @return
*/
public static Date getDayAfter(Date date) {
gregorianCalendar.setTime(date);
int day = gregorianCalendar.get(Calendar.DATE);
gregorianCalendar.set(Calendar.DATE, day + 1);
return gregorianCalendar.getTime();
}
/**
* 获取当前年
*
* @return
*/
public static int getNowYear() {
Calendar d = Calendar.getInstance();
return d.get(Calendar.YEAR);
}
/**
* 获取当前月份
*
* @return
*/
public static int getNowMonth() {
Calendar d = Calendar.getInstance();
return d.get(Calendar.MONTH) + 1;
}
/**
* 获取当月天数
*
* @return
*/
public static int getNowMonthDay() {
Calendar d = Calendar.getInstance();
return d.getActualMaximum(Calendar.DATE);
}
/**
* 获取时间段的每一天
*
* @param startDate
* @param endDate
* @return 日期列表
*/
public static String[] getEveryDay(String startDate, String endDate) {
if (startDate == null || endDate == null) {
return null;
}
Date start_date = DateUtil.formatDate(startDate,"yyyy-MM-dd");
Date end_date = DateUtil.formatDate(endDate,"yyyy-MM-dd");
List<String> everyDays = new ArrayList<String>();
gregorianCalendar.setTime(start_date);
everyDays.add(DateUtil.getDateFormat(gregorianCalendar.getTime()));
while (gregorianCalendar.getTime().compareTo(end_date) < 0) {
// 加1天
gregorianCalendar.add(Calendar.DAY_OF_MONTH, 1);
everyDays.add(DateUtil.getDateFormat(gregorianCalendar.getTime()));
}
return (String[])everyDays.toArray(new String[everyDays.size()]);
}
/**
* 获取提前多少个月
*
* @param month
* @return
*/
public static Date getFirstMonth(int monty) {
Calendar c = Calendar.getInstance();
c.add(Calendar.MONTH, -monty);
return c.getTime();
}
}
数据格式化
public class LineDataUtil {
private List<String> categories = new ArrayList<String>();
private List<String> labels = new ArrayList<String>();
private List<Object[]> vals = new ArrayList<Object[]>();
//折柱
private List<double[]> lineVals = new ArrayList<double[]>();
public LineDataUtil(){}
public List<String> getCategories() {
return categories;
}
public void addCategory(String category) {
this.categories.add(category);
}
public List<String> getLabels() {
return labels;
}
public void addLabel(String label) {
this.labels.add(label);
}
public List<Object[]> getVals() {
return vals;
}
public void addValList(Object[] vals) {
this.vals.add(vals);
}
public void addValList(int rowIndex, int clmnIndex, Object[] vals) {
this.vals.add(vals);
}
public List<double[]> getLineVals() {
return lineVals;
}
public void addLineVals(double[] lineVals) {
this.lineVals.add(lineVals);
}
public void addLineVals(int rowIndex, int clmnIndex, double[] lineVals) {
this.lineVals.add(lineVals);
}
来自一只刚入的小菜鸟，希望大神看到多多指点。