Echarts—折线图动态获取数据示例（java版本）

最终效果

饼状图：饼状图示例，使劲点我！！！

柱状图：柱状图实例，使劲点我！！！

步骤：准备一个dom——>获取dom节点——>初始化——>绘制图表——>渲染数据

html代码

js代码

java代码

/**
 * 主页相关
 * @author DSY 
 */
@CrossOrigin(origins="*",maxAge=3600)	//实现跨域访问，*可以替换成指定的路径
@RestController
public class HomeController {
	
	@Autowired
	private DataSourceService dataSourceService;
	@Autowired
	private CheckRuleService checkRuleService;

	//主页柱状图获取数据
    @RequestMapping(value = "/columndata", method = RequestMethod.GET)
    @ResponseBody
    public List columnData() {
    	//用对象接收返回值，对象存在list里
    	List list  = dataSourceService.getDbType();
    	List datalist = new ArrayList<>();
    	//数据库类型和出现次数
		String dbtype= null;
		int count = 0;
		//遍历list拿到每个对象中需要的，dbtype和count
    	for(int i = 0 ; i < list.size() ; i++) {
    		  dbtype=list.get(i).getDbType();
    		  count = list.get(i).getCount();
    		  datalist.add(dbtype);
    		  datalist.add(count);
    		}
    	 return datalist;
    }
    
    
    //主页饼状图获取数据
    /*
     * 思路
     * 把饼状图需要的两组数据（系统名称和对应的规则数）放在list中，遍历list存入数组，数组存在map找中，最后转成json。这样很麻烦，后续可以改进一下
     * 
     */
    @PostMapping(value = "/piedata")	 
    @ResponseBody
    public Object pieData(@RequestBody Map para){
        List list = new ArrayList<>();
    	//JSONArray json = new JSONArray();
        //JSONArray json = JSONArray.fromObject(list);
        //数据库中拿到目标数据存在嵌套对象的list中
    	list = checkRuleService.getPieData(para.get("user_id"));
    	String[] name= new String[list.size()];
    	String[] data= new String[list.size()];
    	Map map = new HashMap<>();
    	//遍历list将目标数据分别存在两个数组中，然后两个数组作为元素存在map中，以供后面转成echart饼状图要求的json格式数据
    	for (int i = 0; i < list.size(); i++) {
    		 name[i] = list.get(i).getApp_name();
    		 data[i] = Integer.toString(list.get(i).getCount());
    	    	map.put("name", name);
    	    	map.put("data", data);
		}
    	//map转成json对象返回给页面
    	Object json = JSONArray.toJSON(map);
    	//System.out.println("返回给饼状图的json:"+json);
    	return json;
    }

    @PostMapping(value = "/linedata")	 
    @ResponseBody
    @Test
    public Object lineData(@RequestBody Map para){
    	List list = new ArrayList();
    	System.out.println("User_id:"+para.get("user_id"));
    	System.out.println("checkRule_code:"+para.get("checkRule_code"));
    	if(para.get("checkRule_code")!=null){
    		list = checkRuleService.getLineData(para.get("user_id"),para.get("checkRule_code"));
    		 System.out.println("11111111");
    	}else{
    		list = checkRuleService.getLineData(para.get("user_id"),null);
    		 System.out.println("222222222");
    	}
    	System.out.println("list的长度是："+list.size());
    	int intervals = 7;
    	Integer[] data = new Integer[intervals];
    	Integer[][] arr = new Integer[list.size()][intervals];
    	List listtemp = new ArrayList();
    	ArrayList pastDaysList = new ArrayList<>();  
        List legend = new ArrayList(); 				//分组类目
        List category = new ArrayList();			//X轴-时间
        List series = new ArrayList();				//Y轴-数据
        SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");   //定义时间格式，不显示毫秒
        for (int i = 0; i 

 

java的工具类

public class Echarts {

	    public List legend = new ArrayList();//数据分组  
	    public List category = new ArrayList();//横坐标  
	    public List series = new ArrayList();//纵坐标  


	    public Echarts(List legendList, List categoryList, List seriesList) {  
	        super();  
	        this.legend = legendList;  
	        this.category = categoryList;  
	        this.series = seriesList;  
	    }  

}

 

/**
 * 主页相关
 * 供主页折线图渲染数据的参数
 * @author DSY 
 */
public class Series {
    public String name;  

    public String type;  

    public Integer[] data;  
    public Series( String name, String type, Integer[] data) {  
        super();  
        this.name = name;  
        this.type = type;  
        this.data = data;  
    }  

}

SQL语句

 
 
	SELECT result.alert_sum as count,checkrule.checkRule_code as checkRule_code,result.create_time as create_time
	FROM  		tb_tasks         task												         
	LEFT JOIN tb_checkresults  result 	  on task.task_id 		   = result.task_id
	LEFT JOIN tb_checkrules    checkrule  on task.checkRule_code   = checkrule.checkRule_code
	LEFT JOIN system_app       app 	      on app.id                = checkrule.app_id
	where user_id=#{user_id} and 
	checkrule.checkRule_code=#{checkRule_code} and
	 
	
	GROUP BY result.create_time
	ORDER BY result.create_time ASC