Apache ECharts 是一个使用 JavaScript 实现的开源可视化库,它能够生成包括折线图在内的多种图表。折线图是一种常用的数据可视化工具,用于展示数据随时间、类别或其他维度的变化趋势。
以下是一个 Apache ECharts 折线图的示例代码,用于显示气温和湿度的数据:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 折线图示例 - 气温湿度</title>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '某地区气温和湿度变化'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['气温', '湿度']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {
type: 'value',
name: '值',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'气温',
type:'line',
stack: '总量',
data:[22, 24, 23, 26, 25, 28, 27]
},
{
name:'湿度',
type:'line',
stack: '总量',
data:[30, 28, 32, 26, 35, 28, 33]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
在这个示例中,我们创建了一个 ECharts 实例并定义了一个配置对象 option
。在 option
中,我们设置了图表的标题 title
、提示框 tooltip
、图例 legend
、X 轴 xAxis
、Y 轴 yAxis
和系列 series
。
series
对象定义了两个系列:气温
和 湿度
。每个系列都有名称 name
、类型 type
(这里都是 line
,即折线图)、堆叠 stack
(这里设置为 ‘总量’,如果数据有多个系列需要堆叠在一起显示时可以使用)和数据 data
。
请确保将 echarts.min.js
的 URL 替换为实际可用的路径。如果需要,还可以调整 option
对象中的其他配置项,以生成更符合需求的折线图。