echarts折线图 java

### Java项目中使用ECharts实现折线图

为了在Java项目中集成并显示ECharts折线图，通常采用前后端分离的方式开发。前端负责渲染图表，而后端通过接口向页面传递所需的数据。

#### 前端部分：引入ECharts库与HTML结构设置

首先，在项目的前端资源文件夹下（通常是`webapp`目录），于HTML文档内引入ECharts所需的JavaScript库[^1]：

<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

接着定义用于承载图表的容器div标签，并赋予特定ID以便后续初始化操作时定位该元素[^2]：

<div id="trendChart" style="width: 600px;height:400px;"></div>

随后利用JavaScript代码完成图表对象实例化以及配置项设定工作[^3]：

// 初始化图表实例
var trendChart = echarts.init(document.getElementById('trendChart'));

// 设置初始选项
let option = {
    title: { text: '简单折线图' },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name:'销量',
        type:'line', // 折线图类型
        smooth:true, // 平滑曲线
        data:[150, 230, 224, 218, 135, 147, 260]
    }]
};

// 使用刚指定的配置项和数据显示图表。
trendChart.setOption(option);

以上脚本实现了基本折线图绘制逻辑，其中包含了标题、提示框组件、X轴类别坐标系、Y轴数值坐标系及单系列数据集描述等内容。

#### 后端部分：准备JSON格式的数据源

对于Java Web应用而言，可以借助Servlet或Spring MVC控制器来响应AJAX请求并向客户端发送JSON格式化的统计数据作为输入参数给到上述JS函数中的data字段填充实际业务场景下的趋势变化情况[^4]。

假设有一个名为`TrendDataController.java`的类用来处理HTTP GET方法调用，则其内部可能如下所示：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TrendDataController {

    @GetMapping("/getTrendData")
    public List<Integer> getTrendData() {
        return Arrays.asList(150, 230, 224, 218, 135, 147, 260); // 返回模拟销售量列表
    }
}

此段程序片段展示了如何构建RESTful API服务端点以供Ajax异步获取最新动态更新后的图形资料之用途。