1. 折线图主要用来展示数据项随着时间推移的趋势或变化。
2. 最简单的折线图
2.1. 我们通过xAxis将横坐标设为类目型, 并指定了对应的值; 将yAxis的类型设定为数值型。在series中, 我们将系列类型设为line, 并且通过data指定了折线图点的取值。这样, 就能得到一个最简单的折线图了。
2.2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>最简单的折线图</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.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: {},
// 图例组件
legend: {
data: ['2020']
},
// 配置要在X轴显示的项
xAxis: {
type: "category", // 类目
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
// 配置要在Y轴显示的项
yAxis: {
type: 'value' // 在实际的应用中, 如果是'value'类型, 也可以省略不写。
},
// 系列列表
series: [
{
name: '2020', // 系列名称
type: 'line', // 系列图表类型
data: [89.3, 92.1, 94.4, 85.4] // 系列中的数据内容
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
2.3. 效果图
3. 笛卡尔坐标系中的折线图
3.1. 如果我们希望折线图在横坐标和纵坐标上都是连续的, 即在笛卡尔坐标系中, 应该如何实现呢?答案也很简单, 只要把series的data每个数据用一个包含两个元素的数组表示就行了。
3.2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>笛卡尔坐标系中的折线图</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.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: {},
// 图例组件
legend: {
data: ['月销售量']
},
// 配置要在X轴显示的项
xAxis: {},
// 配置要在Y轴显示的项
yAxis: {},
// 系列列表
series: [
{
name: '月销售量', // 系列名称
type: 'line', // 系列图表类型
data: [ // 系列中的数据内容
[1, 100],
[2, 300],
[3, 90],
[4, 110],
[5, 120],
[6, 100],
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
3.3. 效果图
4. 笛卡尔坐标系中的折线图
4.1. 在一个系列中, 可能一个横坐标对应的取值是"空"的, 将其设为0有时并不能满足我们的期望, 空数据不应被其左右的数据连接。
4.2. 在ECharts中, 我们使用字符串'-'表示空数据, 这对其他系列的数据也是适用的。
4.3. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>空数据</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.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: {},
// 图例组件
legend: {
data: ['2020']
},
// 配置要在X轴显示的项
xAxis: {
type: "category", // 类目
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
// 配置要在Y轴显示的项
yAxis: {},
// 系列列表
series: [
{
name: '2020', // 系列名称
type: 'line', // 系列图表类型
data: [89.3, '-', 94.4, 85.4] // 系列中的数据内容
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
4.4. 效果图
5. 堆叠折线图
5.1. 与堆叠柱状图类似, 堆叠折线图也是用系列的stack设置哪些系列堆叠在一起。
5.2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>堆叠折线图</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.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: {},
// 图例组件
legend: {
data: ['2020', '2021', '2022']
},
// 配置要在X轴显示的项
xAxis: {
type: "category", // 类目
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
// 配置要在Y轴显示的项
yAxis: {},
// 系列列表
series: [
{
name: '2020', // 系列名称
type: 'line', // 系列图表类型
data: [29.3, 32.1, 34.4, 25.4], // 系列中的数据内容
stack: '销量'
},
{
name: '2021', // 系列名称
type: 'line', // 系列图表类型
data: [55.8, 49.4, 51.2, 36.9], // 系列中的数据内容
stack: '销量'
},
{
name: '2022', // 系列名称
type: 'line', // 系列图表类型
data: [97.7, 83.1, 92.5, 78.1], // 系列中的数据内容
stack: '销量'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
5.3. 效果图
5.4. 但是不同的是, 如果不加说明的话, 我们很难判断出这是一个堆叠折线图, 还是一个普通的折线图。所以, 对于堆叠折线图而言, 一般建议使用区域填充色以表明堆叠的情况。
5.5. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>堆叠折线图+区域填充色</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.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: {},
// 图例组件
legend: {
data: ['2020', '2021', '2022']
},
// 配置要在X轴显示的项
xAxis: {
type: "category", // 类目
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
// 配置要在Y轴显示的项
yAxis: {},
// 系列列表
series: [
{
name: '2020', // 系列名称
type: 'line', // 系列图表类型
data: [29.3, 32.1, 34.4, 25.4], // 系列中的数据内容
stack: '销量',
areaStyle: {}
},
{
name: '2021', // 系列名称
type: 'line', // 系列图表类型
data: [55.8, 49.4, 51.2, 36.9], // 系列中的数据内容
stack: '销量',
areaStyle: {}
},
{
name: '2022', // 系列名称
type: 'line', // 系列图表类型
data: [97.7, 83.1, 92.5, 78.1], // 系列中的数据内容
stack: '销量',
areaStyle: {}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
5.6. 效果图
6. 平滑曲线图
6.1. 平滑曲线图也是折线图的一种变形, 这种更柔和的样式也是一种不错的视觉选择。使用时, 只需要将折线图系列的smooth属性设置为true即可。
6.2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>平滑曲线图</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.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: {},
// 图例组件
legend: {
data: ['2020', '2021', '2022']
},
// 配置要在X轴显示的项
xAxis: {
type: "category", // 类目
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
// 配置要在Y轴显示的项
yAxis: {},
// 系列列表
series: [
{
name: '2020', // 系列名称
type: 'line', // 系列图表类型
data: [29.3, 32.1, 34.4, 25.4], // 系列中的数据内容
smooth: true
},
{
name: '2021', // 系列名称
type: 'line', // 系列图表类型
data: [55.8, 49.4, 51.2, 36.9], // 系列中的数据内容
smooth: true
},
{
name: '2022', // 系列名称
type: 'line', // 系列图表类型
data: [97.7, 83.1, 92.5, 78.1], // 系列中的数据内容
smooth: true
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
6.3. 效果图
7. 阶梯线图
7.1. 阶梯线图又称方波图, 它使用水平和垂直的线来连接两个数据点, 而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。
7.2. 在ECharts中, 系列的step属性用来表征阶梯线图的连接类型, 它共有三种取值: 'start'、'middle'和'end', 分别表示在当前点, 当前点与下个点的中间点, 下个点拐弯。
7.3. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>阶梯线图</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.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: {},
// 图例组件
legend: {
data: ['2020', '2021', '2022']
},
// 配置要在X轴显示的项
xAxis: {
type: "category", // 类目
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
// 配置要在Y轴显示的项
yAxis: {},
// 系列列表
series: [
{
name: '2020', // 系列名称
type: 'line', // 系列图表类型
step: 'start',
data: [29.3, 32.1, 34.4, 25.4] // 系列中的数据内容
},
{
name: '2021', // 系列名称
type: 'line', // 系列图表类型
step: 'middle',
data: [55.8, 49.4, 51.2, 36.9] // 系列中的数据内容
},
{
name: '2022', // 系列名称
type: 'line', // 系列图表类型
step: 'end',
data: [97.7, 83.1, 92.5, 78.1] // 系列中的数据内容
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
7.4. 效果图