Echarts如何使用java类里面的数据

比如我dao层里操作数据库得到了一个int a=8,我如何在Echarts里面使用它啊,该如何连接?能给个靠谱的源码吗?萌新求教

后台将数据返回到前端 , 前端接收之后将数据传递给Echarts的函数就可以了啊

通过ajax返回js放到var a={}数组里面,然后放到data里面,或者直接放到title下的text里面就行了


//先定义一个返回对象
public class Result {

    //0:成功/1:失败
    private Integer code = 0;
    private Object content;
    //get set
}

@PostMapping(value = "searchEchartData", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public Result searchEchartData(){
    Integer data = service.getEchartData();//service里面写你的dao如何获取数据库的逻辑
    Result result = new Result();
    result.setContent(data);
    return result;
}

$.ajax({
        type: "POST",
        url: "localhost:8080/xx/xx/searchEchartData",
        dataType: "json",
        success: function(json){
            //获取int = 8 然后剩下的事情你看着搞就行了
            var data = json.content;

            initEchart(data);
        }
});

function initEchart(data){
    var myChart = echarts.init(document.getElementById('eChart'));
    var option = {}//这里就是把data 写到 option里面就行
    myChart.setOption(option);
}

这是前后台连接的方法https://blog.csdn.net/qq_41076797/article/details/84309315
dao层把值传到service层再传到Controller层,再由Controller层传到前台.
在前台创建一个var setData=[]对象,把值放进去,再把setData放进Echarts的data属性里.

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: setData,
type: 'bar'
}]
};

我这个是最简单的servlet+jsp的例子;实现思路:后台通过一系列方法获取前台需要的数据,并包装成json数据形式返回给前台;前台通过ajax请求(url请求地址要对)来访问后台获取后台数据

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 防止乱码
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        // 指定允许其他域名访问
        response.setHeader("Access-Control-Allow-Origin", "*");
        // 响应类型
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, DELETE");
        // 响应头设置
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, X-Custom-Header, HaiYi-Access-Token");

        String sql ="SELECT DATE_FORMAT(register_time, '%Y-%m' ) as time, COUNT(register_time) as amount "
                    + "FROM `user` GROUP BY time";
        List<Map<String,String>> userList = baseDao.findData(sql);
        List timeList = new ArrayList<>();
        List amountList = new ArrayList<>();

        for(int i=0;i<userList.size();i++){
            timeList.add(userList.get(i).get("time"));
            amountList.add(userList.get(i).get("amount"));
        }

        //你最主要参考的就是下面转成json数据的方法
        JSONObject json = new JSONObject();
        json.put("timeList", timeList);
        json.put("amountList", amountList);

        response.getWriter().println(json);
    }
$.ajax({
        "url": "count",
        "type": "post",
        "dataType": "json",
        "success": function(data){
             // 基于准备好的dom,初始化echarts实例
          var myChart = echarts.init(document.getElementById('month'));

          // 指定图表的配置项和数据

          var option = {
              title: {
                  text: '每月注册用户量增长曲线'
              },
              tooltip: {},
              xAxis: {
                  data: data.monthReg.timeList
              },
              yAxis: {},
              series: [{
                  name: '注册量',
                  type: 'line',
                  data: data.monthReg.amountList
              },{
                  name: '注册量',
                  type: 'bar',
                  data: data.monthReg.amountList
              }]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },
        "error": function(data){

        }
    })