Java如何往前端传输echarts数据

 (1)这个是传输折线图和条形图的数据类型。

// 查询TimeTable表里面的值返回list

new了一个haspmap值

定义了俩个一维数组设置一维数组的长度为查询出来的list长度

while循环把相对应的值赋值给这俩个一位数组

然后使用map把这俩个一维数组传入map中然后返回前端

返回的数据类型 

 

@ResponseBody
    @RequestMapping("/z5")
    public HashMap<String, Object> z2(HttpSession session) {
        List<TimeTable> list = service.findAll();
        HashMap<String,Object> map = new HashMap<String, Object>();
        int i = 0; 
        String[] names = new String[list.size()];
        int[] datas = new int[list.size()];
        while (i<list.size()) {
                names[i] = list.get(i).getTimeY();
                datas[i] = list.get(i).getTimeCount();
                i++;
            }
        map.put("names",names);
        map.put("datas",datas);
        return map;
    }

(2)这个的话是饼图的数据类型

这个使用json数组,然后new一个jsonobject 类,赋值给object,把数据加到json数组中,再把json数组加到hashmap中,返回值

返回的数据类型


    @ResponseBody
    @RequestMapping("/z4")
    public HashMap<String, Object> z3(HttpSession session) throws Exception {
        List<TimeTable> list = service.findAll();
        HashMap<String,Object> map = new HashMap<String, Object>();
        int i = 0; 
        JSONArray data=new JSONArray();
        while (i<list.size()) {
                JSONObject object = new JSONObject();
                object.put("value", list.get(i).getTimeCount());
                object.put("name", list.get(i).getTimeY());
                System.out.println(object);
                data.add(object);
                i++;
            }
        map.put("names", data);
        return map;
    }

 

ECharts是一个强大的JavaScript图表库,常用于数据可视化。在Java后台使用ECharts,通常涉及以下几个步骤: 1. **前端引入ECharts库**:在前端HTML中引入ECharts的JS和CSS文件,确保项目中已经包含了这些资源。 ```html <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@latest/theme/macarons.min.css"> ``` 2. **数据传输**:Java后端需要处理并返回JSON格式的数据,这是ECharts渲染图表所需的数据结构,例如柱状图、折线图等的基础数据。 ```json { "title": {"text": "My Chart"}, "series": [ { "name": "Data", "type": "bar", "data": [1, 2, 3, 4, 5] } ] } ``` 3. **后端处理和返回数据**:Java服务端根据业务逻辑,比如数据库查询结果,将其转换为上述的JSON格式。 4. **前端调用接口获取数据**:在Java Servlet或Spring MVC的后端代码中,设置好响应头以返回JSON,然后前端通过Ajax或Fetch请求获取数据。 5. **在前端渲染ECharts**:前端使用JavaScript创建ECharts实例,并传入获取到的数据,进行图表的绘制。 ```javascript $.get('/api/chart-data', function(data) { var chart = echarts.init(document.getElementById('main')); chart.setOption(data); }); ``` 6. **事件监听和交互**:可以根据需要添加ECharts的交互功能,如点击事件、鼠标悬浮等。 相关问题: 1. 如何在Java后端生成动态的数据前端ECharts渲染? 2. ECharts的哪些系列类型适合用于Java后台展示? 3. 前端如何通过ECharts的API进行数据绑定和事件处理?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值