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

最终效果

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

折线图：折线图示例，使劲点我！！！

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

html代码

创建一个指定大小的dom
	
		

	

js代码

Java代码

//主页柱状图获取数据
    @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;
    }

sql语句

	
		SELECT DISTINCT dbType,COUNT(*) as count FROM datasource GROUP BY dbType