ECharts饼图动态数据加载与展示

ECharts 官方网站提供了许多精美的图表示例，这些示例中的数据通常是静态的。然而，在实际项目中，我们需要从后端动态获取数据，并将其转换为 ECharts 所需的格式。本文将详细介绍这一过程。

首先，我们可以通过 AJAX 请求从后端获取数据源，并将返回的数据设置为 JSON 格式。后端的数据需要根据 ECharts 图表的需求进行设计。例如，饼状图所需的数据格式如下：

{
  name: '张三',
  value: 666
}, {
  name: '李四',
  value: 333
}

接下来，我们将通过具体的代码示例来说明这一过程。

1. 在控制器（Controller）中编写获取数据的方法：

@RequestMapping(value = "/getData", method = RequestMethod.GET)
public @ResponseBody Map getData() {
    int collected = 0; // 已采集
    int pending = 0; // 等待采集
    int delayed = 0; // 延迟未提供
    int warning = 0; // 数据稽核预警
    int error = 0; // 采集异常

    List collectList = resourceService.getResourceByList();
    for (Resource resource : collectList) {
        // 具体处理逻辑
        if (resource.getStatus().equals("collected")) {
            collected++;
        } else if (resource.getStatus().equals("pending")) {
            pending++;
        } else if (resource.getStatus().equals("delayed")) {
            delayed++;
        } else if (resource.getStatus().equals("warning")) {
            warning++;
        } else if (resource.getStatus().equals("error")) {
            error++;
        }
    }

    List names = new ArrayList<>();
    List values = new ArrayList<>();

    names.add("已采集");
    names.add("等待采集");
    names.add("延迟未提供");
    names.add("数据稽核预警");
    names.add("采集异常");

    values.add(collected);
    values.add(pending);
    values.add(delayed);
    values.add(warning);
    values.add(error);

    Map data = new HashMap<>();
    data.put("names", names);
    data.put("values", values);

    return data;
}

2. 在 JSP 页面中引入必要的控件，并为 ECharts 图表创建一个容器：