Harbor 全局标签管理实战：系统管理员创建、编辑与删除标签的完整流程与源码解析
2026/9/11 12:06:20
第2关：Echarts 绘制折线图
任务描述
本关任务：利用 Echarts 绘制一个简单的折线图。
相关知识
为了完成本关任务，你需要掌握：如何利用 Echarts 绘制折线图。
绘制折线图
绘制折线图的流程和柱状图相同，我们只需要在series中指定type类型为折线图line：
series: [{
name: 'xxx',
type: 'line',
data: [xx, xx,]
}]
series: [{
name: 'xxx',
type: 'line',
data: [xx, xx,]
}]
编程要求
在右侧编辑器补充代码，绘制折线图，效果如下图：
其中实训数量分别为：data: [300, 800, 2400, 3600, 5600, 8000]
测试说明
我会对你编写的代码进行测试：
开始你的任务吧，祝你成功！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.simple.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
<!-- Begin 1 -->
var myChart = echarts.init(document.getElementById('main'));
<!-- End 1 -->
// 指定图表的配置项和数据
<!-- Begin 2 -->
var option = {
title: {
text: 'Educoder 实训统计'
},
tooltip: {},
legend: {
data:['实训数量']
},
xAxis: {
data: ["Java","Python","Linux","数据库","HTML","Web"]
},
yAxis: {},
series: [{
name: '实训数量',
type: 'line',
data: [300, 800, 2400, 3600, 5600, 8000]
}]
};
<!-- End 2 -->
// 使用刚指定的配置项和数据显示图表。
<!-- Begin 3 -->
myChart.setOption(option);
<!-- End 3 -->
</script>
</body>
</html>
有任何问题都可以随时关注私信！