ECharts与Java的后端数据交互（二）

迈不过友情╰ 2021-09-28 13:46 780阅读 0赞

功能：

*  1.拥有[(一)][Link 1]中的全部功能。
 *  2.根据时间段展示（本篇文章的重点）。

最终运行图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjUxMDMy_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjUxMDMy_size_16_color_FFFFFF_t_70 1]  
*说明：这个视图表不能单独根据时间进行数据筛选，这是通过修改原生视图js内容，实现导出Excel文件功能，后续在改进。*

**实现：**

1.  大家既然看这篇文章，说明大家对[ECharts][]还是有所了解的，官网也可自行调试，在这里就不多叙述关于[Echarts][ECharts]的内容了。
2.  SQL语句确定：我用的是MyBatis框架，内容是这样的：

<select id="queryAllByDate" resultType="io.yjkf.entity.EqdbEntity">
        select * from eq_db1
         <where>
         		
    		<if test="stime!=null">
    			AND `ctime` <![CDATA[>=]]>#{stime} 
    		</if>
    		<if test="etime!=null">
    			AND `ctime` <![CDATA[<=]]>#{etime} 
    		</if>
    		</where>
    </select>

1.  实体类。

\*先在这里说明一下，以下将展示两个实体类型，你别感到疑惑，一个是与数据库对应的，另一个是与前端ECharts折线图进行交互的容器实体类（可以理解为一个工具实体类）。\*代码如下：

package io.yjkf.entity;
    
    import java.io.Serializable;
    import java.util.Date;
    
    public class EqdbEntity implements Serializable{
    
    	/**
    	 * 主实体类
    	 */
    	private static final long serialVersionUID = 1L;
    	private Date ctime;
    	private Long c1;
    	private Long c2;
    	private Long c3;
    	private Long c4;
    	private Long c5;
    	private Long c6;
    	public Date getCtime() {
    		return ctime;
    	}
    	public void setCtime(Date ctime) {
    		this.ctime = ctime;
    	}
    	public Long getC1() {
    		return c1;
    	}
    	public void setC1(Long c1) {
    		this.c1 = c1;
    	}
    	public Long getC2() {
    		return c2;
    	}
    	public void setC2(Long c2) {
    		this.c2 = c2;
    	}
    	public Long getC3() {
    		return c3;
    	}
    	public void setC3(Long c3) {
    		this.c3 = c3;
    	}
    	public Long getC4() {
    		return c4;
    	}
    	public void setC4(Long c4) {
    		this.c4 = c4;
    	}
    	public Long getC5() {
    		return c5;
    	}
    	public void setC5(Long c5) {
    		this.c5 = c5;
    	}
    	public Long getC6() {
    		return c6;
    	}
    	public void setC6(Long c6) {
    		this.c6 = c6;
    	}
    	
    	
    }

package io.yjkf.entity;
    
    //工具实体类
    public class EqdbDateVo {
    
    	private String[] date;
    	private Long[] count;
    	private Long[] count2;
    	private Long[] count3;
    	private Long[] count4;
    	private Long[] count5;
    	private Long[] count6;
    	public Long[] getCount() {
    		return count;
    	}
    	public void setCount(Long[] count) {
    		this.count = count;
    	}
    	public String[] getDate() {
    		return date;
    	}
    	public void setDate(String[] date) {
    		this.date = date;
    	}
    	public Long[] getCount2() {
    		return count2;
    	}
    	public void setCount2(Long[] count2) {
    		this.count2 = count2;
    	}
    	public Long[] getCount3() {
    		return count3;
    	}
    	public void setCount3(Long[] count3) {
    		this.count3 = count3;
    	}
    	public Long[] getCount4() {
    		return count4;
    	}
    	public void setCount4(Long[] count4) {
    		this.count4 = count4;
    	}
    	public Long[] getCount5() {
    		return count5;
    	}
    	public void setCount5(Long[] count5) {
    		this.count5 = count5;
    	}
    	public Long[] getCount6() {
    		return count6;
    	}
    	public void setCount6(Long[] count6) {
    		this.count6 = count6;
    	}
    }

1.  Dao层不啰嗦：

List<EqdbEntity> queryAllByDate(@Param("stime") Date stime,@Param("etime") Date etime);

1.  service层和dao层一样
2.  service实现类：

@Override
    	public List<EqdbEntity> queryAllByDate(Date stime, Date etime) {
    		List<EqdbEntity> list=new ArrayList<EqdbEntity>();
    		list=eqdbDao.queryAllByDate(stime, etime);
    		return list;
    	}

1.  交互控制层（其实很简单，你能看懂的）

@ResponseBody
    	@RequestMapping(value="/eqtest",method=RequestMethod.POST)
    	@RequiresPermissions("sys:eqdb:test")
    	public EqdbDateVo toDataAnalysis(@RequestParam("stime") String stime, @RequestParam("etime") String etime){
    		List<EqdbEntity> list=new ArrayList<EqdbEntity>();
    		 SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    		 try {
    		 Date date1;
    		Date date2;
    		if("".equals(stime)){
    			stime=null;
    			date1=simpleDateFormat.parse("2019-04-06 00:00:00");
    				}else{
    			
    				date1=simpleDateFormat.parse(stime);
    				}
    		if("".equals(etime)){
    			etime=null;
    			date2=simpleDateFormat.parse("2019-05-06 00:00:00");
    		}else{
    			date2=simpleDateFormat.parse(etime);
    		}
    		list=eqdbService.queryAllByDate(date1, date2);
    			} catch (ParseException e) {
    				e.printStackTrace();
    			}
    		 String[] date = new String[list.size()];
    		 Long[] count = new Long[list.size()];
    		 Long[] count2=new Long[list.size()];
    		 Long[] count3 = new Long[list.size()];
    		 Long[] count4 = new Long[list.size()];
    		 Long[] count5 = new Long[list.size()];
    		 Long[] count6 = new Long[list.size()];
    		 int i=0;
    		 for(EqdbEntity eq:list){
    			 count[i] = eq.getC1();
    			 count2[i] = eq.getC2();
    			 count3[i] = eq.getC3();
    			 count4[i] = eq.getC4();
    			 count5[i] = eq.getC5();
    			 count6[i] = eq.getC6();
    			 date[i] = simpleDateFormat.format(eq.getCtime());//将list中的日期付给date
    	            i++;
    		 }
    		 EqdbDateVo eqdbDateVo=new EqdbDateVo();
    		 eqdbDateVo.setCount(count);
    		 eqdbDateVo.setCount2(count2);
    		 eqdbDateVo.setCount3(count3);
    		 eqdbDateVo.setCount4(count4);
    		 eqdbDateVo.setCount5(count5);
    		 eqdbDateVo.setCount6(count6);
    		 eqdbDateVo.setDate(date);
    		 return eqdbDateVo;
    		
    	}

1.  前端页面：

*  准备条件：echarts-all.js、jquery.js、jquery.table2excel.js、WdatePicker.js（my97时间控件）。  
    这里有需要者，我会帮你们上传至我的gitHub。

普通html或jsp页面

在这里附上我的时间文本框样式：

最后是ECharts的展示代码（花点时间，你能看懂的，加油，就快要成功了）：

参考过的文档：https://blog.csdn.net/weixin\_39725742/article/details/81904488  
很感谢他。  
本博文由于在项目工程下进行的测试案列，不易分割，上面内容也已经很全了。  
最后如果大家有什么问题或帮助，欢迎提问！

[Link 1]: https://blog.csdn.net/qq_43251032/article/details/89673845
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjUxMDMy_size_16_color_FFFFFF_t_70]: /images/20210923/92e83487249c41dfa91a873fc5865c71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjUxMDMy_size_16_color_FFFFFF_t_70 1]: /images/20210923/7befcf00c4e14b04bb90e87d71094838.png
[ECharts]: https://echarts.baidu.com/examples/