java+echarts实现动态图表详解

java+echarts实现动态图表，jsp前台页面通过ajax异步请求，controller层处理完数据返回前台实现动态图表。

一个简单实例：

1. 前台echarts图表依赖js文件：

echarts.js 下载地址：http://echarts.baidu.com/download.html

jquery-1.11.2.min.js jquery依赖js文件

2.前台页面：

引用echarts.js、jquery-1.11.2.min.js

编写图表：

//ajax异步请求获取后台动态数据

$.ajax({
                    url:"login.do",//要请求的服务器url
                    async:true,   //是否为异步请求
                    cache:false, //是否缓存结果
                    type:"POST", //请求方式为POST
                    dataType:"json",   //服务器返回的数据是什么类型
                    success:function(result){ //这个方法会在服务器执行成功是被调用，参数result就是服务器返回的值(现在是json类型)
                        if(result){
                   myChart.setOption({        //给echarts图标赋值
                   xAxis: {
                      data: result.xAxis
                  },
                  series: [{
                        data: result.series
                    }]
                });
                        }else{
                            alert(2)
                        }
                    }
                })


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'java+ECharts实现动态图表'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

</script>

更多类型的图表参考echarts官网，地址：http://echarts.baidu.com/examples/

2.java后台controller层：

package controller;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import dao.JsonUtil;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import vo.User;

@Controller
public class Usercontroller {

@ResponseBody
@RequestMapping("/login.do")
public void login(HttpServletResponse response){
    JSONObject jo=new JSONObject();
    JSONArray arr=new JSONArray();
    arr.add(1);
    arr.add(2);
    arr.add(3);
    arr.add(4);
    arr.add(5);
    arr.add(6);
    JSONArray arr1=new JSONArray();
    arr1.add(10);
    arr1.add(20);
    arr1.add(30);
    arr1.add(40);
    arr1.add(50);
    arr1.add(60);
    jo.put("xAxis", arr);
    jo.put("series", arr1);

System.out.println( "========>"+jo.toString());

//后台输出的json格式：

//========>{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}
//========>{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}

JsonUtil.write(response, jo); //把值返回给前台
}
}

实际使用查询出数据组装成“{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}“这种格式json返回给前台即可。

3.测试

java+echarts实现动态图表详解

猜你喜欢