echart统计图表折线图demo

首先，我们引入相关的js文件     <script type="text/javascript" src="<%=basePath%>common/devplatform/js/echarts-3.1.9/echarts.min.js"></script>

我们建立一个div层，存放图表。

<div id="line" style="width: 600px; height:400px;"></div>

写相关js；初始化图表

var deptName = "";
 $(document).ready(function(){
     //折线图
       testLine();
  
  });
 
  var myChart = echarts.init(document.getElementById('line'));
  //折线图
     function testLine(){
       $.ajax({
            //提交数据的类型 POST GET
            type:"POST",
            //提交的网址
            url:"<%=basePath%>test/echart_getLineData.action",
            //提交的数据
            data:{deptName : deptName},
            //返回数据的格式
            datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
            //在请求之前调用的函数
            //beforeSend:function(){$("#msg").html("logining");},
            //成功返回之后调用的函数            
            success:function(data){
            var result = eval("("+data+")");
            myChart.setOption({
              title: {
                    text: '部门人数统计',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    feature: {
                     dataView : {show: true, readOnly: false},
                        saveAsImage: {show : true}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: result.xData
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                },
                visualMap: {
                    show: false,
                    dimension: 0,
                    pieces: [{
                        lte: 6,
                        color: 'green'
                    }, {
                        gt: 6,
                        lte: 8,
                        color: 'red'
                    }, {
                        gt: 8,
                        lte: 14,
                        color: 'green'
                    }, {
                        gt: 14,
                        lte: 17,
                        color: 'red'
                    }, {
                        gt: 17,
                        color: 'green'
                    }]
                },
                series: [
                    {
                        name:'用电量',
                        type:'line',
                        smooth: true,
                        data: result.yData,
                       
                    }
                ]
      });
            
            },
            //调用执行后调用的函数
            //complete: function(XMLHttpRequest, textStatus){
              /// alert(XMLHttpRequest.responseText);
              // alert(textStatus);
                //HideLoading();
            //},
            //调用出错执行的函数
            error: function(){
                //请求出错处理
                $.message.alert("出错了");
            }        
         });
     } 

后台action； 首先我们分析需要显示的数据是什么格式，一般有List。List<Map> 两种

这里的折线图简单，需要两个list。我们可以利用循环从总的list取值。

Map param = this.getRequestParameters();   《==》等同于 request.getParameter("name");
 public void getLineData() throws IOException{
   Map<String, Object> schMap = new HashMap<String, Object>();
   schMap.put("deptName", param.get("deptName"));
   List<Map> lineData = testService.getLineData(schMap);
   List xData = new ArrayList<String>();
   List yData = new ArrayList<String>();
   for (int i = 0; i < lineData.size(); i++) {
    xData.add(lineData.get(i).get("DEPTNAME"));
    yData.add(lineData.get(i).get("SL"));
   }
    JSONObject jsonObject = new JSONObject();
          jsonObject.put("xData", xData);
          jsonObject.put("yData", yData);
      //JSONArray jsonArray=JSONArray.fromObject(jsonObject);
      getResponse().setContentType("application/text;charset=UTF-8");
   getResponse().getWriter().print(jsonObject.toString()); 
  
  
 }