IT技术社区_专业开发者平台_最新编程教程与解决方案 -沐辰社区

ECharts Java生成案例

wen java案例 2

本文目录导读：

ECharts Java生成案例

  1. 添加依赖
  2. 基础柱状图案例
  3. 折线图案例
  4. 饼图案例
  5. 组合图表（柱状图+折线图）
  6. 完整的Web应用示例
  7. 前端HTML页面
  8. Spring Boot 配置

我来为您提供一个使用Java生成ECharts图表的完整案例,这里我将使用ECharts的Java封装库 echarts-java 来演示。

添加依赖

首先在pom.xml中添加依赖：

<dependency>
    <groupId>com.github.abel533</groupId>
    <artifactId>ECharts</artifactId>
    <version>3.0.0</version>
</dependency>

基础柱状图案例

package com.example.echarts;
import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Magic;
import com.github.abel533.echarts.code.Tool;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.json.GsonUtil;
import com.github.abel533.echarts.option.EOption;
import com.github.abel533.echarts.option.Legend;
import com.github.abel533.echarts.option.Toolbox;
import com.github.abel533.echarts.option.series.Bar;
import com.github.abel533.echarts.option.series.Line;
import com.github.abel533.echarts.option.Title;
import com.github.abel533.echarts.option.Tooltip;
import com.github.abel533.echarts.option.data.CategoryData;
import com.github.abel533.echarts.option.data.NumberData;
public class BarChartExample {
    public static String generateBarChart() {
        // 创建Option对象
        EOption option = new EOption();
        // 设置标题
        Title title = new Title();
        title.setText("销售数据统计");
        title.setSubtext("2024年第一季度");
        option.setTitle(title);
        // 设置提示框
        Tooltip tooltip = new Tooltip();
        tooltip.setTrigger(Trigger.axis);
        option.setTooltip(tooltip);
        // 设置图例
        Legend legend = new Legend();
        legend.setData("销量", "利润");
        option.setLegend(legend);
        // 设置工具箱
        Toolbox toolbox = new Toolbox();
        toolbox.setShow(true);
        toolbox.setFeature(Tool.dataView, Tool.saveAsImage, 
                          Tool.restore, Tool.dataZoom, Tool.magicType);
        option.setToolbox(toolbox);
        // 设置X轴（类目轴）
        CategoryAxis categoryAxis = new CategoryAxis();
        CategoryData categoryData = new CategoryData();
        categoryData.setData("1月", "2月", "3月",
                            "4月", "5月", "6月");
        categoryAxis.setData(categoryData);
        option.setxAxis(categoryAxis);
        // 设置Y轴（数值轴）
        ValueAxis valueAxis = new ValueAxis();
        option.setyAxis(valueAxis);
        // 设置柱状图数据
        Bar bar1 = new Bar();
        bar1.setName("销量");
        bar1.setData(new NumberData(120, 200, 150, 80, 170, 110));
        Bar bar2 = new Bar();
        bar2.setName("利润");
        bar2.setData(new NumberData(30, 50, 40, 20, 45, 35));
        // 添加数据系列
        option.series(bar1, bar2);
        // 转换为JSON字符串
        return GsonUtil.format(option);
    }
    public static void main(String[] args) {
        String json = generateBarChart();
        System.out.println(json);
    }
}

折线图案例

package com.example.echarts;
import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Magic;
import com.github.abel533.echarts.code.Tool;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.json.GsonUtil;
import com.github.abel533.echarts.option.EOption;
import com.github.abel533.echarts.option.Legend;
import com.github.abel533.echarts.option.Toolbox;
import com.github.abel533.echarts.option.series.Line;
import com.github.abel533.echarts.option.Title;
import com.github.abel533.echarts.option.Tooltip;
import com.github.abel533.echarts.option.data.CategoryData;
import com.github.abel533.echarts.option.data.NumberData;
public class LineChartExample {
    public static String generateLineChart() {
        EOption option = new EOption();
        // 标题
        Title title = new Title();
        title.setText("用户增长趋势");
        title.setSubtext("2024年-2025年");
        option.setTitle(title);
        // 提示框
        Tooltip tooltip = new Tooltip();
        tooltip.setTrigger(Trigger.axis);
        option.setTooltip(tooltip);
        // 图例
        Legend legend = new Legend();
        legend.setData("微信用户", "APP用户");
        option.setLegend(legend);
        // 工具箱
        Toolbox toolbox = new Toolbox();
        toolbox.setShow(true);
        toolbox.setFeature(Tool.dataView, Tool.saveAsImage);
        option.setToolbox(toolbox);
        // X轴
        CategoryAxis categoryAxis = new CategoryAxis();
        CategoryData categoryData = new CategoryData();
        categoryData.setData("1月", "2月", "3月", "4月", 
                            "5月", "6月", "7月", "8月");
        categoryAxis.setData(categoryData);
        option.setxAxis(categoryAxis);
        // Y轴
        ValueAxis valueAxis = new ValueAxis();
        option.setyAxis(valueAxis);
        // 折线数据
        Line line1 = new Line();
        line1.setName("微信用户");
        line1.setData(new NumberData(120, 132, 101, 134, 90, 230, 210, 182));
        Line line2 = new Line();
        line2.setName("APP用户");
        line2.setData(new NumberData(220, 182, 191, 234, 290, 330, 310, 382));
        option.series(line1, line2);
        return GsonUtil.format(option);
    }
    public static void main(String[] args) {
        System.out.println(generateLineChart());
    }
}

饼图案例

package com.example.echarts;
import com.github.abel533.echarts.code.Magic;
import com.github.abel533.echarts.code.Tool;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.json.GsonUtil;
import com.github.abel533.echarts.option.EOption;
import com.github.abel533.echarts.option.Legend;
import com.github.abel533.echarts.option.Toolbox;
import com.github.abel533.echarts.option.Tooltip;
import com.github.abel533.echarts.option.series.Pie;
import com.github.abel533.echarts.option.Title;
import com.github.abel533.echarts.option.data.PieData;
public class PieChartExample {
    public static String generatePieChart() {
        EOption option = new EOption();
        // 标题
        Title title = new Title();
        title.setText("地区销售占比");
        title.setSubtext("2024年第一季度");
        title.setLeft("center");
        option.setTitle(title);
        // 提示框
        Tooltip tooltip = new Tooltip();
        tooltip.setTrigger(Trigger.item);
        tooltip.setFormatter("{a} <br/>{b} : {c} ({d}%)");
        option.setTooltip(tooltip);
        // 图例
        Legend legend = new Legend();
        legend.setData("北京", "上海", "广州", "深圳", "其他");
        legend.setBottom("bottom");
        option.setLegend(legend);
        // 工具箱
        Toolbox toolbox = new Toolbox();
        toolbox.setShow(true);
        toolbox.setFeature(Tool.restore, Tool.saveAsImage);
        option.setToolbox(toolbox);
        // 饼图数据
        Pie pie = new Pie();
        pie.setName("销售占比");
        pie.setRadius(55, 160);
        pie.setCenter("50%", "45%");
        // 添加数据
        pie.setData(
            new PieData("北京", 120),
            new PieData("上海", 200),
            new PieData("广州", 150),
            new PieData("深圳", 80),
            new PieData("其他", 50)
        );
        option.series(pie);
        return GsonUtil.format(option);
    }
    public static void main(String[] args) {
        System.out.println(generatePieChart());
    }
}

组合图表（柱状图+折线图）

package com.example.echarts;
import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.json.GsonUtil;
import com.github.abel533.echarts.option.EOption;
import com.github.abel533.echarts.option.Legend;
import com.github.abel533.echarts.option.Tooltip;
import com.github.abel533.echarts.option.series.Bar;
import com.github.abel533.echarts.option.series.Line;
import com.github.abel533.echarts.option.Title;
import com.github.abel533.echarts.option.data.CategoryData;
import com.github.abel533.echarts.option.data.NumberData;
public class ComboChartExample {
    public static String generateComboChart() {
        EOption option = new EOption();
        // 标题
        Title title = new Title();
        title.setText("销售数据统计分析");
        option.setTitle(title);
        // 提示框
        Tooltip tooltip = new Tooltip();
        tooltip.setTrigger(Trigger.axis);
        option.setTooltip(tooltip);
        // 图例
        Legend legend = new Legend();
        legend.setData("销量", "增长率");
        option.setLegend(legend);
        // X轴
        CategoryAxis categoryAxis = new CategoryAxis();
        CategoryData categoryData = new CategoryData();
        categoryData.setData("1月", "2月", "3月", "4月", 
                            "5月", "6月", "7月", "8月");
        categoryAxis.setData(categoryData);
        option.setxAxis(categoryAxis);
        // Y轴
        ValueAxis valueAxis = new ValueAxis();
        option.setyAxis(valueAxis);
        // 柱状图（销量）
        Bar bar = new Bar();
        bar.setName("销量");
        bar.setData(new NumberData(120, 200, 150, 80, 170, 110, 90, 160));
        // 折线图（增长率）
        Line line = new Line();
        line.setName("增长率");
        line.setData(new NumberData(20, 25, 18, 30, 35, 22, 28, 33));
        // 添加系列
        option.series(bar, line);
        return GsonUtil.format(option);
    }
    public static void main(String[] args) {
        System.out.println(generateComboChart());
    }
}

完整的Web应用示例

package com.example.echarts.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/api/chart")
public class ChartController {
    @GetMapping("/bar")
    public String getBarChart() {
        return BarChartExample.generateBarChart();
    }
    @GetMapping("/line")
    public String getLineChart() {
        return LineChartExample.generateLineChart();
    }
    @GetMapping("/pie")
    public String getPieChart() {
        return PieChartExample.generatePieChart();
    }
    @GetMapping("/combo")
    public String getComboChart() {
        return ComboChartExample.generateComboChart();
    }
}

前端HTML页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">ECharts Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <style>
        .chart-container {
            width: 800px;
            height: 400px;
            margin: 20px auto;
        }
        h2 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>ECharts Java 图表示例</h2>
    <div id="barChart" class="chart-container"></div>
    <div id="lineChart" class="chart-container"></div>
    <div id="pieChart" class="chart-container"></div>
    <script>
        $(document).ready(function() {
            // 加载柱状图
            $.get('api/chart/bar', function(data) {
                var chart = echarts.init(document.getElementById('barChart'));
                chart.setOption(JSON.parse(data));
            });
            // 加载折线图
            $.get('api/chart/line', function(data) {
                var chart = echarts.init(document.getElementById('lineChart'));
                chart.setOption(JSON.parse(data));
            });
            // 加载饼图
            $.get('api/chart/pie', function(data) {
                var chart = echarts.init(document.getElementById('pieChart'));
                chart.setOption(JSON.parse(data));
            });
            // 响应式处理
            window.addEventListener('resize', function() {
                var charts = document.querySelectorAll('.chart-container');
                charts.forEach(function(container) {
                    var instance = echarts.getInstanceByDom(container);
                    if (instance) {
                        instance.resize();
                    }
                });
            });
        });
    </script>
</body>
</html>

Spring Boot 配置

# application.yml
server:
  port: 8080
spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    cache: false

这个案例提供了完整的ECharts Java生成方案，包括：

  • 柱状图
  • 折线图
  • 饼图
  • 组合图表
  • Web应用集成

您可以根据实际需求调整图表样式和数据格式。

上一篇Java实现数据可视化案例

下一篇Java实现报表设计案例

相关文章

抱歉，评论功能暂时关闭!