学习如何修改echarts使其显示数据为后台传到前台的数据

（本菜鸟为即将毕业的实习生，大神看了不要嘲笑问题低级0.0）最近在学习百度echarts，其中遇到最大的问题是，使其实现动态显示后台数据。因为网上的例子也比较少，经过2天的学习，总结一下其中遇到的问题。

一.echarts提供的api页面

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        
        var myChart = echarts.init(document.getElementById('main'));
      option={
            title: {
                text: '一周气站出气量'
            },
            tooltip: {},
            legend: {
                data:['单位/L']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '单位/L',
                type: 'bar',
                data: []
            }]
        };
     myChart.setOption(option);

</script >

1.首先要实现后台数据显示， xAxis 与series中的[]要为空

2添加一个js方法

.function getChartData() {  
            //获得图表的options对象  
            
            //通过Ajax获取数据  
            $.ajax({  
                type : "post",  
                async : false, //同步执行  
                url : "<%=basePath%>/qzgl/qzmap/qzgl/report2.ht",  
                data : {},  
                dataType : "json", //返回数据形式为json  
                success : function(result) {  
                    if (result) { 
                    var dataobj=JSON.parse(result);
                    alert(dataobj.xList);
                   myChart.setOption({
                         xAxis: {
                             data:dataobj.xList
                         },
                         series: [{
                             // 根据名字对应到相应的系列
                             name: '销量',
                             data:dataobj.yList
                         }]
                     });
                      }  
                },  
                error : function(errorMsg) {  
                    alert("无数据");  
                      
                }  
            });  
        }  
  3.后台的方法

@RequestMapping("report2")
@ResponseBody
public  String echar2(HttpServletRequest request,HttpServletResponse response) throws Exception{

// List<Integer> list = new ArrayList<Integer>(Arrays.asList(  
//                100,200,300));
// List<String> list2 = new ArrayList<String>(Arrays.asList(  
//                "q","w","e"));


List<Integer> list = new ArrayList<Integer>();
List<String> list2 = new ArrayList<String>();

List<Qzglself> qzgl = qzglService.self();

for(int i=0;i<qzgl.size();i++){
System.out.println(qzgl.get(i).getFQzdqcl());
System.out.println(Integer.parseInt(qzgl.get(i).getFQzdqcl()));
list.add(Integer.parseInt(qzgl.get(i).getFQzdqcl()));
list2.add(qzgl.get(i).getFQzmc());
}

System.out.println("11111111111111111111111111111111111111111111111111111111111111");


return JSON.toJSONString(new Dateinfo(list2,list));


}

注意，坑了我一天的地方来了。。

echarts前台date的数据是  必须是["1","2","3"]  或者[100,200,300] 是这样类型的   

而我却将查出来的对象数组直接转为json格式如下  

[{"name":"1","num":100}.{"name":"2","num":200}.{"name":"3","num":300}]

导致数据不能正常显示

最后想出了一个办法

                List<Integer> list = new ArrayList<Integer>();
List<String> list2 = new ArrayList<String>();

List<Qzglself> qzgl = qzglService.self();

for(int i=0;i<qzgl.size();i++){
System.out.println(qzgl.get(i).getFQzdqcl());
System.out.println(Integer.parseInt(qzgl.get(i).getFQzdqcl()));
list.add(Integer.parseInt(qzgl.get(i).getFQzdqcl()));
list2.add(qzgl.get(i).getFQzmc());
}
return this.getAutoView().addObject("json",JSON.toJSONString(new Dateinfo(list2,list)));

将对象数组分别赋值两个list 再用一个 Dateinfo 类封装起来

这样前台调用就变成了上面js方法所示。

最后还有一个发现，将json字符串 Dateinfo 直接返回，

ajax里要用JSON.parse(result);转一下

而如果将json字符串用ModelAndView 传给页面  var a=${json}   a为object类型  所以可以不用ajax 方法

在echarts 方法里直接  data: ${json}.xxx 就可以实现

写完发现 咦 也不难嘛？  唉真是会了不觉得难  不会的时候难如登天 哈哈

最后加一张成品图 哈哈