echarts折线图时间序列
时间: 2025-01-07 19:48:40 浏览: 17
使用 ECharts 实现时间序列折线图
为了实现基于时间序列的折线图,需先引入必要的依赖库[^1]:
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
初始化图表实例并指定容器 ID 后,可以通过 option
对象配置图表属性。对于时间序列而言,重点在于 X 轴应设为时间类型,并提供相应格式化的时间戳作为数据点。
配置项详解
- title: 设置图表标题。
- tooltip: 开启提示框组件,支持自动显示数值。
- legend: 添加图例说明不同曲线含义。
- xAxis: 定义横轴为时间类别型,设定内部参数如
type
,boundaryGap
和axisLabel
来优化日期显示效果。 - yAxis: 垂直方向上的度量标准。
- series: 描述实际绘图的数据集及其样式选项。
下面给出一段完整的 HTML+JavaScript 代码片段来展示如何构建一个简单的时间序列折线图:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('main');
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = 'ECharts 时间序列折线图';
// 模拟一些随机数构成的时间序列数据
function generateFakeData() {
var date = new Date(2023, 9, 1); // 起始时间为2023年10月1号
var data = [];
for (let i=0; i<30; ++i){
let timestamp = date.getTime();
data.push([timestamp, Math.floor(Math.random()*100)]);
date.setDate(date.getDate()+1);
}
return data;
}
option = {
title : {
text: '某地区一个月内每日气温变化',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高温度']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis : [
{
type : 'time', // 将X轴定义成时间轴
splitLine:{show:false}
}
],
yAxis : [
{
type : 'value' // Y轴表示具体的测量值
}
],
series : [
{
name:'最高温度',
type:'line',
data:generateFakeData(),
markPoint : {data:[{name : '最大值', type : 'max'}]},
markLine : {data:[{type : 'average', name : '平均值'}]}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
此段脚本会生成一张描述虚构的一个月中每天最高温随日子波动情况的折线图。其中包含了基本元素如标题、工具栏按钮以及标注特殊点位的功能。