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

最新推荐文章于 2022-09-02 09:09:56 发布

Orlando_Yang

最新推荐文章于 2022-09-02 09:09:56 发布

阅读量7.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：新的技术文章标签： echarts

本文链接：https://blog.youkuaiyun.com/qq_37855506/article/details/79396976

新的技术专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种利用Java后台接口提供数据，并结合ECharts在前端进行数据可视化的实现方式。通过具体的代码示例，展示了如何配置后台RESTful API来返回特定的数据结构，以及如何在前端使用JavaScript和ECharts来获取这些数据并绘制图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台数据

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

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

   List<String> clist1 = new ArrayList<String>();
   clist1.add("毛衣");
   clist1.add("衬衣");
   clist1.add("春装");
   clist1.add("毛裤");
   clist1.add("秋衣");
   clist1.add("秋裤");
   List<Integer> clist2 = new ArrayList<Integer>();
   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();
      });