当前位置：首页 > Java

java如何嵌入echats

2026-03-23 12:09:29Java

在Java中嵌入ECharts

Java中嵌入ECharts通常通过Web前端技术实现，常见方式包括使用Java Web框架（如Spring MVC）或模板引擎（如Thymeleaf）将ECharts的JavaScript代码嵌入HTML页面。以下是具体实现方法：

引入ECharts库

在HTML页面中通过CDN或本地文件引入ECharts的JavaScript库：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

准备HTML容器

在HTML中定义一个容器用于渲染图表：

<div id="chart-container" style="width: 600px; height: 400px;"></div>

后端数据传递

通过Java后端（如Spring MVC）将数据传递给前端：

@RestController
public class ChartController {
    @GetMapping("/chart-data")
    public Map<String, Object> getChartData() {
        Map<String, Object> data = new HashMap<>();
        data.put("categories", Arrays.asList("A", "B", "C"));
        data.put("values", Arrays.asList(10, 20, 30));
        return data;
    }
}

前端初始化图表

使用JavaScript调用后端API获取数据并渲染图表：

fetch('/chart-data')
    .then(response => response.json())
    .then(data => {
        const chart = echarts.init(document.getElementById('chart-container'));
        const option = {
            xAxis: { type: 'category', data: data.categories },
            yAxis: { type: 'value' },
            series: [{ data: data.values, type: 'bar' }]
        };
        chart.setOption(option);
    });

使用模板引擎（Thymeleaf示例）

若使用Thymeleaf，可直接在HTML中嵌入动态数据：

java如何嵌入echats

<script th:inline="javascript">
    const data = {
        categories: [[${categories}]],
        values: [[${values}]]
    };
    // 初始化图表代码同上
</script>