用eclipse和ECharts库编写HTML的折线图和条形图_echart怎么在eclipse中使用-CSDN博客

本文链接：https://blog.csdn.net/2301_80215803/article/details/136667056

本文介绍了如何在Eclipse中创建Java项目，并导入ECharts库，展示如何在HTML文件中使用ECharts绘制折线图和条形图，以展示数据可视化的基本步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，在eclipse中新建一个Java Project包

2，在这个包中创建三个Floder包，并取名为css，image，js

3，将下载好的ECharts库导入js中（可直接拖动）

4，创建HTML file，在其中编写代码

以下为折线图代码及结果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折线图示例</title>
<script src="js/echarts.js"></script>
</head>
<body>
<h1>折线图示例</h1>

var lineChart = echarts.init(document.getElementById('lineChart'));

var option = {
title: {
text: '折线图'
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
tooltip:{
trigger: 'axis',
formatter: '{x},{y}'
},
series: [
{
name: '语文',
type: 'line', // 图表类型为折线图
data: yDataArr
}
]
};

lineChart.setOption(option);
</script>

</body>
</html>

以下是条形图代码及结果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条形图示例</title>
<script src="js/echarts.js"></script>
</head>
<body>
<h1>条形图示例</h1>

var lineChart = echarts.init(document.getElementById('lineChart'));

var option = {
title: {
text: '条形图'
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
tooltip:{
trigger: 'axis',
formatter: '{x},{y}'
},
series: [
{
name: '语文',
type: 'bar', // 图表类型为条形图
data: yDataArr
}
]
};