116.echarts 动态获取后台数据（定时刷新）

最新推荐文章于 2024-05-27 11:47:54 发布

weixin_34163741

最新推荐文章于 2024-05-27 11:47:54 发布

阅读量2.7k

点赞数 2

文章标签： python

原文链接：https://my.oschina.net/springMVCAndspring/blog/1819644

版权

2019独角兽企业重金招聘Python工程师标准>>>

这个是是使用用maven +ssm 组成的如果要运行需要参考前面两个博客搭建 maven环境

代码放到码云上：

1. 效果

2. 代码

官方 demo:

http://echarts.baidu.com/echarts2/doc/example.html

2.1 前端

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts<</title>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>
   
<div id="main" style="height:400px"></div>

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
$(function(){

       setInterval(function(){setChartBar()}, 5*1000); // 间歇执行 setChartBar是被调用的方法名称
    });

//设置ajax访问后台填充柱图 http://localhost:8080/mavenssm20180519/index2.jsp
   function setChartBar(url){
       var Chart=echarts.init(document.getElementById("main"));//初始化
       //用户等待
       Chart.showLoading(
               {text: 'Loding...' }
       );
       //自定义变量
       var categories=[];
       var values=[];

       //发送Ajax请求
       $.ajax({
          url : "${pageContext.request.contextPath }/getData.action",
          dataType:"json",
          type:'post',
          success:function(json){
              categories = json.categories; //拿到后台的数据
       values = json.values; //拿到后台的数据
//--------------------------官方的开始--http://echarts.baidu.com/echarts2/doc/example/bar1.html-
   //将上面照片中demo代码替换记得
           var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : categories //替换变量
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",// 图像类型
"data":values //替换变量
}
]
};
           //--------------------------官方的结束----------------------------------------
           Chart.hideLoading();
              Chart.setOption(option);
              }
          });




}

</script>
</body>
</html>

2.2 后台代码

后台需要的json数据格式

{"values":[80,50,75,100],"categories":["鞋","衬衫","外套","牛仔裤"]}

代码：

//http://localhost:8080/mavenssm20180519/echartspie.jsp

@RequestMapping(value="/getPieData.action")
   public void getPieData(HttpServletRequest request, HttpServletResponse response) throws IOException{
       response.setContentType("text/html; charset=utf-8");
       String[] label = {"搜索引擎","直接访问","邮件营销","联盟广告","视频广告"};
       String[] value = {"700","300","500","300","200"};
   Map<String, Object> json = new HashMap<String, Object>();
   json.put("label", label);
   json.put("value", value);

       String jsonStri = JSONObject.toJSONString(json);//阿里 fastjson 转换json数据

       PrintWriter out=response.getWriter();
       out.println(jsonStri);
       out.flush();
       out.close();

   }

3. 改进版本

3.1 html

-->

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

$.get('${pageContext.request.contextPath }/getPieData.action').done(function (data) {//后台请求
   var obj = JSON.parse(data);
   var categories =obj.categories;
   var label =obj.label;
   var data =obj.data;
// console.log(categories) //控制台输出方式一
//console.dir(categories)//控制台输出方式二
   //-------------------------替换开始----------------------------------------
var option={
   title : {
                   text: '未来一周气温变化',
                   subtext: '纯属虚构'
                   },
                   tooltip : {
                   trigger: 'axis'
                   },
                   legend: {
                   data:categories//分类线名称
                   },
                   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 : label//X轴
                   }
                   ],
                   yAxis : [
                   {
                   type : 'value',
                   axisLabel : {
                   formatter: '{value} °C'
                   }
                   }
                   ],
                   series : data//Y轴
};
                   //-------------------------替换结束----------------------------------------

// 为echarts对象加载数据
myChart.setOption(option);
});

}
);
</script>
</body>
</html>

3.2 后台模拟数据

需要的数据格式：

/**
   * 2. 学习多条数据图应该封装的json格式
   * getPieData
   * @param response
   * @throws IOException
   */
   @RequestMapping(value="/getPieData")
   public void getPieData(HttpServletResponse response) throws IOException{
       //设置响应编码格式
       response.setContentType("text/html; charset=utf-8");
       String[] label = {"周一","周二","周三","周四","周五","周六","周日"};//数组
       String[] categories = {"最高气温","最低气温"};//数组
       int[] values = {80, 50, 75, 100,1,36,59};
       int[] values2 = {60, 70, 45, 80, 50, 75, 100};

           List<Weacher> list = new ArrayList<Weacher>();
               Weacher w1 = new Weacher();
                   w1.setName("最高气温");
                   w1.setType("line");
                   int[] data=values;
                   w1.setData(data);
                   w1.setSmooth(true);
               Weacher w2 = new Weacher();
                   w2.setName("最低气温");
                   w2.setType("line");
                   int[] data2=values2;
                   w2.setData(data2);
                   w2.setSmooth(true);
                   list.add(w1);
                   list.add(w2);

       Map<String, Object> json = new HashMap<String, Object>();
       json.put("label", label);
       json.put("categories", categories);
       json.put("data", list);
               String jsonStri = JSONObject.toJSONString(json);
               System.out.println(jsonStri);
               //将结果以流的形式输出到请求位置
               PrintWriter out=response.getWriter();
               out.println(jsonStri);
               out.flush();
               out.close();
   }

4. 版本3 完全动态

4.1 效果

4.2 实现过程

4.2.1 前端

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-2.1.4.min.js"></script>
</head>
<body>
       
<div id="main" style="height:550px"></div>

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
$.get('${pageContext.request.contextPath }/getLineData.action').done(function (data) {
   var obj = JSON.parse(data);
   var categories =obj.categories;
   var label =obj.label;
   var data =obj.data;
   //alert(data)
   //console.log(categories)
   //console.dir(categories)
   //-------------------------替换开始----------------------------------------
var option={
   title : {
                   text: '未来一周气温变化',
                   subtext: '纯属虚构'
                   },
                   tooltip : {
                   trigger: 'axis'
                   },
                   legend: {
                   data:categories//分类线名称
                   },
                   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 : label//X轴
                   }
                   ],
                   yAxis : [
                   {
                   type : 'value',
                   axisLabel : {
                   formatter: '{value} °C'
                   }
                   }
                   ],
                   series : data//Y轴
};
                   //-------------------------替换结束----------------------------------------

// 为echarts对象加载数据
myChart.setOption(option);
});

}
);
</script>
</body>
</html>

4.2.2 后台

4.2.2.1 controller层

4.2.2.2 业务层

接口：

（****）实现类：

/**
   * 3. 根据数据库动态显示折线图数量
   * @throws IOException
   *
   */
   public String queryJsonDataToShowLine(HttpServletResponse response) throws IOException {
       //3.1 返回日期
       List<String> listTime = testMavenSSMMapper.queryTime();
       //3.2 返回数组名称
       List<String> listCategories = testMavenSSMMapper.queryType();
       List<Object> listAllData = new ArrayList<Object>();//存放map数据对象
       // 3.3 根据类型去查询数据
       for (int i = 0; i < listCategories.size(); i++) {
           String type = listCategories.get(i);//根据类别去查询
           List<Integer> listData = testMavenSSMMapper.getListDataByType (type);
           Map<String, Object> map = new HashMap<String, Object>();
           map.put("data", listData);
           map.put("name", type);
           map.put("smooth", true);
           map.put("type", "line");
           listAllData.add(map);//将每次的结果封装到map,再将map放到list
       }
       Map<String, Object> json = new HashMap<String, Object>();
       json.put("label", listTime);
       json.put("categories", listCategories);
       json.put("data", listAllData);
           String jsonStri = JSONObject.toJSONString(json);
       return jsonStri;
   }