关于echarts 与后台数据进行交互

后台数据

@RequestMapping(value = "apple")
@ResponseBody
public Map findInfo(){
  Map map=new HashMap<>();

   正常的话会是通过sql去查到数据  以这样的形式去将数据循环出来

   List clist1 = new ArrayList();
   clist1.add("毛衣");
   clist1.add("衬衣");
   clist1.add("春装");
   clist1.add("毛裤");
   clist1.add("秋衣");
   clist1.add("秋裤");
   List clist2 = new ArrayList();
   clist2.add(12);
   clist2.add(10);
   clist2.add(22);
   clist2.add(32);
   clist2.add(22);
   clist2.add(12);
   map.put("clist1", clist1);
   map.put("clist2",clist2);

   return map;
}

这个是jsp页面和js

 function findss() {
//       var datas=[11, 11, 20, 13, 12, 13, 10];
         var data2="";
//       ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
         var datas="";
         $.ajax({
            type:"post",
            url:"${path}/user/apple",
            success:function(r){
               datas= r.clist2;
               data2= r.clist1;
               alert(data2);
               alert(datas);
               var myChart = echarts.init(document.getElementById('chaertTable'));
               option = {
                  title: {
                     text: '未来一周气温变化',
                  },
                  tooltip: {
                     trigger: 'axis'
                  },
                  legend: {
                     data: ['最高气温', '最低气温']
                  },
                  toolbox: {
                     show: true,
                     feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                     }
                  },
                  calculable: true,
                  xAxis: [
                     {
                        type: 'category',
                        boundaryGap: false,
                        data: data2
                     }
                  ],
                  yAxis: [
                     {
                        type: 'value',
                        axisLabel: {
                           formatter: '{value} °C'
                        }
                     }
                  ],
                  series: [
                     {
                        name: '最高气温',
                        type: 'line',
                        data: datas,
                        markPoint: {
                           data: [
                              {type: 'max', name: '最大值'},
                              {type: 'min', name: '最小值'}
                           ]
                        },
                        markLine: {
                           data: [
                              {type: 'average', name: '平均值'}
                           ]
                        }
                     },
                     {
                        name: '最低气温',
                        type: 'line',
                        data: [1, -2, 2, 5, 3, 2, 0],
                        markPoint: {
                           data: [
                              {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                           ]
                        },
                        markLine: {
                           data: [
                              {type: 'average', name: '平均值'}
                           ]
                        }
                     }
                  ]
               };
               myChart.setOption(option);
            }

         })



//       myChart.setOption(option);
      }
      $(document).ready(function() {
         findss();
      });