![](https://i-blog.csdnimg.cn/blog_migrate/107d250fa9609f12f5f688955f1647a2.png)
option = {
// 标题
title: {
text: '折线图学习'
},
// 图表的提示框组件(axis按照轴,常用于折线图;item按照块,常用于饼图柱状图)
tooltip: {
trigger: 'axis'
},
//图例组件
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
// 坐标轴的设置(grid:网格)
grid: {
// 距离上下左右的距离
left: '3%',
right: '4%',
bottom: '3%',
// 是否要轴标签
containLabel: true
},
// 工具箱组件:可以另存为图片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
// 坐标轴设置
xAxis: {
type: 'category',
// 坐标轴和线条之间是否有缝隙
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
// 系列图表配置
series: [
{
name: 'Email',
type: 'line',
// stack:数据堆叠,一般不需要
// stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
![](https://i-blog.csdnimg.cn/blog_migrate/8e025f507f77957007dc665262d6d3b6.png)
- 实用工具:Echarts官方文档
- 视频课程:pink老师可视化项目