Echart 从小白到入门 小实例(附源码)

echar官网t：http://echarts.baidu.com/

echart 是我目前了解的比较好的用来做前端表格展示的工具。由百度公司研发和维护，做的还是不错的。

以前了解过，但是没有真正在项目中运用，用过之后感觉其他使用的方法很简单，根据api想要什么就设置什么即可。

本博文只负责记录一下我弄得第一个实际小demo，应项目要求是折线图，所以简单写了一个小demo。

(讲道理，别的类型的图形都差不多，只要会根据api开发，啥都不是事)，话不多说，直接上代码。

注：这里为了方便，是在线引用两个js文件，实际项目推荐下载到本地

这里面我主要讲一下我在开发的时候自己遇到的问题和解决方案：

①js文件的引用，推荐引用带有源码的echart.js，有的是使用echart.min.js ，echart是附带全部源码的文件，适合开发使用

②echarts的各个属性配置 按照需求根据官方api设置  推荐API地址：http://echarts.baidu.com/echarts2/doc/doc.html

⑤图表各项数据与后台交互，详细参考js中getChartData()方法。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
   
  
      
        
        
      
    	
      
  
    
  
    
	  
  
 

后台EchartController .java方法(用于造数据)

package com.cn.control.echart;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.cn.model.echart.EchartData;
import com.cn.model.echart.Series;

/** * @author  feifz: 
    * @date ：2017年7月5日 上午11:13:42 
    * @return  
	* @desc
    */
@Controller
@RequestMapping("echart")
public class EchartController {
	
	/**
	 * 
	 * @return
	 */
	@RequestMapping("getEchartData")
	@ResponseBody
	public EchartData getEchartData(){
		List legendList=new ArrayList();
		
		List categoryList=new ArrayList();
		categoryList.add("20170301-20170308");
		categoryList.add("20170309-20170316");
		categoryList.add("20170317-20170324");
		categoryList.add("20170325-20170401");
		categoryList.add("20170402-20170409");
		categoryList.add("20170410-20170417");
		categoryList.add("20170418-20170425");
		List seriesList =new ArrayList<>();
		List data1 = new ArrayList<>();
		data1.add(111);
		data1.add(272);
		data1.add(313);
		data1.add(474);
		data1.add(515);
		data1.add(474);
		data1.add(515);
		seriesList.add(new Series("消费金额(元)", "line",data1));
		List data2 = new ArrayList<>();
		data2.add(111);
		data2.add(222);
		data2.add(333);
		data2.add(444);
		data2.add(555);
		data2.add(444);
		data2.add(555);
		seriesList.add(new Series("周环比(100%)", "line",data2)); 
		EchartData echartData = new EchartData(legendList, categoryList, seriesList);
		return echartData;
	}
}

    （效果图）