本文首发：《Echarts 折线图齐全配置指南》
Echarts 折线图是图表中最罕用的显示模式之一。应用 Echarts 做出根本的折线图很简略，但要是想把多组数据放在一张图表中，展现的丑陋又直观就不容易了。本文将率领大家从最根本的折线图，一步步欠缺，最终做出可读性很高的可视化图表。
依据本教程在卡拉云中搭建的折线图 Demo，你能够立刻注册卡拉云，追随本教程学习
追随本教程你将学到
1. 折线外观属性
- 折线减少弧线平滑过渡
- 折线图变为散状圆点
- 实线改为虚线
- 折线指定色彩
- 减少数据显示
- 表格外观属性
- 鼠标滑过期，显示数据提示框
- 鼠标滑过期，显示十字准心指示器
- 鼠标滑过数据主动吸附
- 设置 X 轴、Y 轴色彩
- 设置 X 轴标签 45 度斜着显示
- 设置图表背景色彩
- 设置下载图表的功能键
Echarts 折线图根底配置
本文应用低代码开发工具卡拉云作为 Echarts 折线图的演示工具，卡拉云内置包含 Echarts 图表组件在内数十种常见的前端组件，仅需拖拽即可生成。你无需懂任何前端常识，也能够疾速开发出属于本人的后盾工具。详情请见本文文末。
咱们从这个最简略的折线图动手，手把手教大家一步步学习。
option = {
title: {
text: '卡拉云新用户激活数据',
subtext: 'Demo 虚构数据',
x: 'center'
},
legend: {
orient: 'horizontal',
x: 'left',
y: 'top',
data: ['猜测','预期','理论']
},
grid: {
top: '20%',
left: '3%',
right: '10%',
bottom: '5%',
containLabel: true
},
xAxis: {
name: '月份',
type: 'category',
data: ['1 月','2 月','3 月','4 月','5 月','6 月','7 月','8 月','9 月','10 月','11 月','12 月',]
},
yAxis: {
name: '人次',
type: 'value',
min:0, // 配置 Y 轴刻度最小值
max:4000, // 配置 Y 轴刻度最大值
splitNumber:7, // 配置 Y 轴数值距离
},
series: [ // 多组折线图数据
{
name: '猜测',
data: [454,226,891,978,901,581,400,543,272,955,1294,1581],
type: 'line'
},
{
name: '预期',
data: [2455,2534,2360,2301,2861,2181,1944,2197,1745,1810,2283,2298],
type: 'line',
},
{
name: '理论',
data: [1107,1352,1740,1968,1647,1570,1343,1757,2547,2762,3170,3665],
type: 'line'
}
],
color: ['#3366CC', '#FFCC99','#99CC33']
}扩大浏览：《最好用的 7 款 Vue 富文本编辑器》
Echarts 折线图的多种展现模式配置指南
- 「猜测」折线改为散状圆点
- 「猜测」折线圆点依据数据大小变动尺寸
- 「猜测」折线暗藏线段局部
- 「预期」折线改为虚线
- 「理论」折线改为弧度适度
- Echarts legend 属性配置（图例配置选项）
- Echarts grid 属性配置（图表上下左右边缘的间隔）
在卡拉云的图表组件中填入代码：
option = {
title: {
text: '卡拉云新用户激活数据',
subtext: 'Demo 虚构数据',
x: 'center'
},
legend: { // 图例配置选项
orient: 'horizontal', // 图例布局形式：程度 'horizontal'、垂直 'vertical'
x: 'left', // 横向搁置地位，选项：'center'、'left'、'right'、'number'（横向值 px）y: 'top',// 纵向搁置地位，选项：'top'、'bottom'、'center'、'number'（纵向值 px）data: ['猜测','预期','理论']
},
grid: { // 图表间隔边框的间隔，可用百分比和数字（px）配置
top: '20%',
left: '3%',
right: '10%',
bottom: '5%',
containLabel: true
},
xAxis: {
name: '月份',
type: 'category',
data: ['1 月','2 月','3 月','4 月','5 月','6 月','7 月','8 月','9 月','10 月','11 月','12 月',]
},
yAxis: {
name: '人次',
type: 'value',
min:0, // 配置 Y 轴刻度最小值
max:4000, // 配置 Y 轴刻度最大值
splitNumber:7, // 配置 Y 轴数值距离
},
series: [
{
name: '猜测',
data: [454,226,891,978,901,581,400,543,272,955,1294,1581],
type: 'line',
symbolSize: function(value) { // 点的大小追随数值减少而变大
return value / 150;
},
symbol:'circle',
itemStyle: {
normal: {
label : {show: true},
lineStyle:{color: 'rgba(0,0,0,0)'// 折线色彩设置为 0，即只显示点，不显示折线
}
}
}
},
{
name: '预期',
data: [2455,2534,2360,2301,2861,2181,1944,2197,1745,1810,2283,2298],
type: 'line',
symbolSize:8, // 设置折线上圆点大小
itemStyle:{
normal:{
label : {show: true // 在折线拐点上显示数据},
lineStyle:{
width:3, // 设置虚线宽度
type:'dotted' // 虚线 'dotted' 实线 'solid'
}
}
}
},
{
name: '理论',
data: [1107,1352,1740,1968,1647,1570,1343,1757,2547,2762,3170,3665],
type: 'line',
symbol: 'circle', // 实心圆点
smooth: 0.5, // 设置折线弧度
}
],
color: ['#3366CC', '#FFCC99','#99CC33'] // 三个折线的色彩
}扩大浏览：《12 款最棒 Vue 开源 UI 库测评 – 特地针对国内应用场景举荐》
Echarts 折线图全局配置指南
- 鼠标滑过期，显示数据提示框
- 鼠标滑过期，显示十字准心指示器
- 设置 X 轴、Y 轴色彩
- 设置 X 轴标签 45 度斜着显示
- 设置图表背景色彩
- 设置下载图表的功能键
在卡拉云的图表组件中填入代码：
option = {
title: {
text: '卡拉云新用户激活数据',
subtext: 'Demo 虚构数据',
x: 'center'
},
legend: { // 图例配置选项
orient: 'horizontal', // 图例布局形式：程度 'horizontal'、垂直 'vertical'
x: 'left', // 横向搁置地位，选项：'center'、'left'、'right'、'number'（横向值 px）y: 'top',// 纵向搁置地位，选项：'top'、'bottom'、'center'、'number'（纵向值 px）data: ['猜测','预期','理论']
},
grid: { // 图表间隔边框的间隔，可用百分比和数字（px）配置
top: '20%',
left: '3%',
right: '10%',
bottom: '5%',
containLabel: true
},
tooltip: { // tooltip 用于管制鼠标滑过或点击时的提示框（下一章开展讲）trigger: 'axis',
axisPointer: { // 坐标轴指示器配置项。type: 'cross', // 'line' 直线指示器 'shadow' 暗影指示器 'none' 无指示器 'cross' 十字准星指示器。axis: 'auto', // 指示器的坐标轴。snap: true, // 坐标轴指示器是否主动吸附到点上
},
showContent: true,
},
toolbox: { // 右上角的工具框（下一章开展讲）feature: {saveAsImage: {} // 下载按钮
}
},
xAxis: {
name: '月份',
type: 'category',
axisLine: {
lineStyle: { // X 轴色彩配置
color: '#3366CC'
}
},
axisLabel: {
rotate: 45, // X 轴标签文字旋转角度
interval: 0 // 设置 X 轴数据距离几个显示一个，为 0 示意都显示
},
boundaryGap: false, // 数据从 Y 轴起始
data: ['1 月','2 月','3 月','4 月','5 月','6 月','7 月','8 月','9 月','10 月','11 月','12 月',]
},
yAxis: {
name: '人次',
type: 'value',
min:0, // 配置 Y 轴刻度最小值
max:4000, // 配置 Y 轴刻度最大值
splitNumber:7, // 配置 Y 轴数值距离
axisLine: {
lineStyle: { // Y 轴色彩配置
color: '#3366CC'
}
},
},
series: [
{
name: '猜测',
data: [454,226,891,978,901,581,400,543,272,955,1294,1581],
type: 'line',
symbolSize: function(value) { // 点的大小追随数值减少而变大
return value / 150;
},
symbol:'circle',
itemStyle: {
normal: {
label : {show: true},
lineStyle:{color: 'rgba(0,0,0,0)'// 折线色彩设置为 0，即只显示点，不显示折线
}
}
}
},
{
name: '预期',
data: [2455,2534,2360,2301,2861,2181,1944,2197,1745,1810,2283,2298],
type: 'line',
symbolSize:8, // 设置折线上圆点大小
itemStyle:{
normal:{
label : {show: true // 在折线拐点上显示数据},
lineStyle:{
width:3, // 设置虚线宽度
type:'dotted' // 虚线 'dotted' 实线 'solid'
}
}
}
},
{
name: '理论',
data: [1107,1352,1740,1968,1647,1570,1343,1757,2547,2762,3170,3665],
type: 'line',
symbol: 'circle', // 实心圆点
smooth: 0.5, // 设置折线弧度
}
],
color: ['#3366CC', '#FFCC99','#99CC33'] // 三个折线的色彩
}扩大浏览：《顶级好用的 5 款 Vue table 表格组件测评与举荐》
Echarts toolbox 更多属性配置
toolbox={
show : true, // 是否显示工具栏组件
orient:"horizontal", // 工具栏 icon 的布局朝向 'horizontal' 'vertical'
itemSize:15, // 工具栏 icon 的大小
itemGap:10, // 工具栏 icon 每项之间的距离
showTitle:true, // 是否在鼠标 hover 的时候显示每个工具 icon 的题目
feature : {
mark : { // '辅助线开关'
show: true
},
dataView : { // 数据视图工具，能够展示以后图表所用的数据，编辑后能够动静更新
show: true, // 是否显示该工具。title:"数据视图",
readOnly: false, // 是否不可编辑（只读）lang: ['数据视图', '敞开', '刷新'], // 数据视图上有三个话术，默认是 ['数据视图', '敞开', '刷新']
backgroundColor:"#fff", // 数据视图浮层背景色。textareaColor:"#fff", // 数据视图浮层文本输入区背景色
textareaBorderColor:"#333", // 数据视图浮层文本输入区边框色彩
textColor:"#000", // 文本色彩。buttonColor:"#c23531", // 按钮色彩。buttonTextColor:"#fff", // 按钮文本色彩。},
magicType: { // 动静类型切换
show: true,
title:"切换", // 各个类型的题目文本，能够别离配置。type: ['line', 'bar'], // 启用的动静类型，包含 'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为重叠模式）, 'tiled'（切换为平铺模式）},
restore : { // 配置项还原。show: true, // 是否显示该工具。title:"还原",
},
saveAsImage : { // 保留为图片。show: true, // 是否显示该工具。type:"png", // 保留的图片格式。反对 'png' 和 'jpeg'。name:"pic1", // 保留的文件名称，默认应用 title.text 作为名称
backgroundColor:"#ffffff", // 保留的图片背景色，默认应用 backgroundColor，如果 backgroundColor 不存在的话会取红色
title:"保留为图片",
pixelRatio:1 // 保留图片的分辨率比例，默认跟容器雷同大小，如果须要保留更高分辨率的，能够设置为大于 1 的值，例如 2
},
dataZoom :{ // 数据区域缩放。目前只反对直角坐标系的缩放
show: true, // 是否显示该工具。title:"缩放", // 缩放和还原的题目文本
xAxisIndex:0, // 指定哪些 xAxis 被管制。如果缺省则管制所有的 x 轴。如果设置为 false 则不管制任何 x 轴。如果设置成 3 则管制 axisIndex 为 3 的 x 轴。如果设置为 [0, 3] 则管制 axisIndex 为 0 和 3 的 x 轴
yAxisIndex:false, // 指定哪些 yAxis 被管制。如果缺省则管制所有的 y 轴。如果设置为 false 则不管制任何 y 轴。如果设置成 3 则管制 axisIndex 为 3 的 y 轴。如果设置为 [0, 3] 则管制 axisIndex 为 0 和 3 的 y 轴
},
},
zlevel:0, // 所属图形的 Canvas 分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的下面
z:2, // 所属组件的 z 分层，z 值小的图形会被 z 值大的图形笼罩
left:"center", // 组件离容器左侧的间隔,'left', 'center', 'right','20%'
top:"top", // 组件离容器上侧的间隔,'top', 'middle', 'bottom','20%'
right:"auto", // 组件离容器右侧的间隔,'20%'
bottom:"auto", // 组件离容器下侧的间隔,'20%'
width:"auto", // 图例宽度
height:"auto", // 图例高度
};扩大浏览：《最好用的 7 款 Vue admin 后盾治理框架测评》
Echarts tooltip 更多属性配置
tooltip: {
show: true, // 是否显示
trigger: 'axis', // 触发类型 'item' 图形触发：散点图，饼图等无类目轴的图表中应用；'axis' 坐标轴触发；'none'：什么都不触发。axisPointer: { // 坐标轴指示器配置项。type: 'shadow', // 'line' 直线指示器 'shadow' 暗影指示器 'none' 无指示器 'cross' 十字准星指示器。axis: 'auto', // 指示器的坐标轴。snap: true, // 坐标轴指示器是否主动吸附到点上
},
// showContent: true, // 是否显示提示框浮层，默认显示。// triggerOn: 'mouseover', // 触发机会 'mouseover' 鼠标挪动时触发。'click' 鼠标点击时触发。'mousemove|click' 同时鼠标挪动和点击时触发。// enterable: false, // 鼠标是否可进入提示框浮层中，默认为 false，如需详情内交互，如增加链接，按钮，可设置为 true。renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额定的 DOM 节点展现 tooltip；backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景色彩。borderColor: '#333', // 提示框浮层的边框色彩。borderWidth: 0, // 提示框浮层的边框宽。padding: 5, // 提示框浮层内边距，textStyle: { // 提示框浮层的文本款式。color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 14,
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额定附加到浮层的 css 款式
confine: false, // 是否将 tooltip 框限度在图表的区域内。// formatter: '{b} 的问题是 {c}'
formatter: function(arg) {return arg[0].name + '的分数是:' + arg[0].data
}
},扩大浏览：《最好用的 6 款 Vue 拖拽组件库举荐》
应用「卡拉云」间接生成折线图、柱状图、饼状图
本文介绍了 Echarts 折线图各种配置细节，从简到难，循序渐进。尽管 Echarts 的教程很多，但配置前端的工作总是有太多重复劳动，那么有没有一种齐全不必会前端，一行代码也不必写的办法，生成图表呢？这里举荐你应用卡拉云，卡拉云内置多种款式的图表，仅需鼠标拖拽即可生成，齐全不必懂任何前端。
卡拉云是新一代低代码开发工具，免装置部署，可一键接入包含 MySQL 在内的常见数据库及 API。可依据本人的工作流，定制开发。无需繁琐的前端开发，只须要简略拖拽，即可疾速搭建企业外部工具。 原来三天的开发工作量，应用卡拉云后可缩减至 1 小时，欢送收费试用卡拉云。
扩大浏览：
- 最好用的 10 款 MySQL GUI 数据库管理工具横向测评 – 收费和付费到底怎么选?
- 最好用的 7 款 Vue3 admin 后盾管理系统框架测评
- 最好的 6 个收费天气预报 API 接口比照测评 – 和风天气、高德天气等 API 接入详解
- 最棒的 7 个 Laravel admin 后盾管理系统举荐
- Vue Router 手把手教你搭 Vue3 路由页面跳转
- React Draggable 实现拖拽组件库 – 最具体中文应用教程
- Echarts 折线图齐全配置指南