🍓 作者主页：💖仙女不下凡💖
🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！
🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！
🍓Echart官网地址：https://echarts.apache.org/examples/zh/index.html#chart-type-line
- label：图形上的文本标签。（偶尔用）
- endLabel：折线端点的标签。（不常用）
- labelLine：标签的视觉引导线配置。（不常用）
- labelLayout：标签的统一布局配置。（不常用）
- itemStyle：折线拐点标志的样式。
- lineStyle：线条样式。
- areaStyle：区域填充样式。设置后显示成区域面积图。
- emphasis：折线图的高亮状态。
-
blur：折线图的淡出状态。开启
emphasis.focus后有效。 -
select：折线图的选中状态。开启
selectedMode后有效。 - data：数据内容数组
- markPoint：图表标注。
- markLine：图表标线。
- markArea：图表标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告。
- universalTransition：全局过渡动画相关的配置。
-
tooltip：本系列特定的
tooltip设定。参考tooltip全局组件
💕 series-line折线图（面积图）配置属性，具体使用请参考一下内容
series: [{
type: 'line', //这个配置表示折线图
id: '', // 组件id，默认不指定
name: '', // 系列名称，用于tooltip显示，legend图例筛选，在setOption更新数据和配置项时用于指定对应的系列
colorBy: 'series', //option.color中取色的策略，属性值：series同一系列中的所有数据都是用相同的颜色/data每个数据项都使用不同的颜色
coordinateSystem: 'cartesian2d', //该系列使用的坐标系，属性值：cartesian2d(默认)/polar(极坐标)
xAxisIndex: 0, //使用x轴的index，在单个图表实例中存在多个x轴的时候有用
yAxisIndex: 0, //使用y轴的index，在单个图表实例中存在多个y轴的时候有用
polarIndex: 0, //使用的极坐标系的 index
symbol: 'emptyCircle', //标记的图形。
symbolSize: 4, //标记的大小
symbolRotate: (value: Array|number, params: Object) => number, //标记的旋转角度（而非弧度）
symbolKeepAspect: false, //若symbol是path:// 的形式，是否在缩放时保持该图形的长宽比
symbolOffset: [0, 0], //标记相对于原本位置的偏移
showSymbol: true, //是否显示symbol, 如果false则只有在tooltip hover时显示。
showAllSymbol: 'auto', //只在主轴为类目轴（axis.type 为 'category'）时有效。 可选值：auto默认，如果有足够空间则显示标志图形，否则随主轴标签间隔隐藏策略/true：显示所有图形/false：随主轴标签间隔隐藏策略
legendHoverLink: true, //是否启用图例hover时联动高亮
stack: '', //数据堆叠，可选值：Total...
stackStrategy: 'samesign', //堆积数值的策略,可选值：samesign(默认)/all/positive/negative
cursor: 'pointer', //鼠标悬浮
connectNulls: false, //是否连接空数据
clip: true, //是否裁剪超出坐标系部分的图形
triggerLineEvent: false, //线条和区域面积是否触发事件
step: false, //是否是阶梯线图
label: {
show: false,
position: 'top',
distance: 5, //距离图形元素的距离
rotate: 0, //标签旋转
offset: 0, //是否对文字进行偏移, 如[30,40],30,40
formatter: ..., //标签内容格式器, 这个可以写值可以写函数接值，不展开说明了
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 12,
align: ..., //文字水平对齐方式，默认自动。可选值：left/center/right
verticalAlign: ..., //文字垂直对齐方式，默认自动。可选值：top/middle/bottom
lineHeight: ...,
backgroundColor: 'transparent',
borderColor: ...,
borderWidth: 0,
borderType: 'solid', //可选值：solid/dashed/dotted
borderDashOffset: 0,
borderRadius: 0,
padding: 0,
shadowColor: 'transparent',
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
width: ...,
height: ...,
textBorderColor: ..., //文字本身的描边颜色
textBorderWidth: ..., //文字本身的描边宽度
textBorderType: 'solid', //可选值：solid/dashed/dotted
textBorderDashOffset: 0,
textShadowColor: 'transparent',
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
overflow: 'none',
ellipsis: '', //在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本
rich: {}, //富文本标签，可以与formatter配合使用，不展开说明具体参考富文本标签
},
endLabel: {}, //参考label里面的属性，但是endLabel里面没有position属性
labelLine: {
show: ..,
showAbove: ..., //是否显示在图形上方
length2: ..., //视觉引导项第二段的长度
smooth: false, //是否平滑视觉引导线，默认不平滑
minTurnAngle: ...,
lineStyle: { //标签的视觉引导线的线的样式
color: '#000',
width: 1,
type: 'solid',
dashOffset: 0, //用于设置虚线的偏移量，可搭配 type 指定 dash array 实现灵活的虚线效果
cap: 'butt', //用于指定线段末端的绘制方式
join: 'bevel', //用于设置2个长度不为0的相连部分,可选值：bevel/round/miter
miterLimit: 10, //用于设置斜接面限制比例
shadowBlur: ...,
shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
}
},
labelLayout: {
hideOverlap: ..., //是否隐藏重叠的标签
moveOverlap: ..., //在标签重叠的时候是否挪动标签位置以防止重叠
x: ..., //标签的 x 位置。支持绝对的像素值或者'20%'这样的相对值。
y: ..., //参考x
dx: ..., //标签在 x 方向上的像素偏移。可以和x一起使用。
dy: ..., //参考x
rotate: ..., //标签旋转角度
width: ..., //标签显示的宽度
height: ...,
align: ..., //标签水平对齐方式。可以设置'left', 'center', 'right'
verticalAlign: ..., //标签垂直对齐方式。可以设置'top', 'middle', 'bottom'
fontSize: ...,
draggable: ..., //标签是否可以允许用户通过拖拽二次调整位置。
labelLinePoints: ... //标签引导线三个点的位置。格式为：[[x, y], [x, y], [x, y]]
},
lineStyle: {}, //参考上面的labelLine.lineStyle
areaStyle: {
color: '#000',
origin: 'auto', //图形区域的起始位置。可选值：auto/start/end/number
shadowBlur: ...,
shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 0.7
},
emphasis: {
disabled: false, //是否关闭高亮状态。默认false
scale: true, //是否开启 hover 在拐点标志上的放大效果
focus: 'none', //高亮图形时，是否淡出其它数据图形已达到聚焦的效果。属性值：none/self/series
blurScope: 'coordinateSystem', //在开启focus时，可以通过blurScope配置淡出的范围
label: {}, //参考上面的label
labelLine: {}, //参考上面的labelLine
itemStyle: {}, //参考上面的itemStyle
lineStyle: {}, //参考上面的lineStyle
areaStyle: {}, //参考上面areaStyle配置
endLabel: {} //参考label里面的属性，但是endLabel里面没有position属性
},
blur: {
label: {}, //参考上面的label
labelLine: {}, //参考上面的labelLine
itemStyle: {}, //参考上面的itemStyle
lineStyle: {}, //参考上面的lineStyle
areaStyle: {}, //参考上面areaStyle配置
endLabel: {} //参考label里面的属性，但是endLabel里面没有position属性
},
select: {
label: {}, //参考上面的label
labelLine: {}, //参考上面的labelLine
itemStyle: {}, //参考上面的itemStyle
lineStyle: {}, //参考上面的lineStyle
areaStyle: {}, //参考上面areaStyle配置
endLabel: {} //参考label里面的属性，但是endLabel里面没有position属性
},
selectedMode: false, //选中模式的配置, 可选值：single/multiple/series
smooth: false, //是否平滑曲线显示
smoothMonotone: ..., //折线平滑后是否在一个维度上保持单调性，可以设置成'x', 'y'来指明是在 x 轴或者 y 轴上保持单调性
sampling: ..., //折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点
dimensions: ...,
encode: ...,
seriesLayoutBy: 'column',
datasetIndex: 0,
dataGroupId: ...
data: [{}],
markPoint: {},
markLine: {},
markArea: {},
zlevel: 0,
z: 2,
silent: false,
animation: true,
animationThreshold: 2000,
animationDuration: 1000,
animationEasing: 'linear',
animationDelay: 0,
animationDurationUpdate: 300,
animationEasingUpdate: 'cubicInOut',
animationDelayUpdate: 0,
universalTransition: {},
tooltip: {}
}]
👉推荐相关文章：Echart图表 之 基本使用及配置项
👉推荐相关文章：Echart图表 之 title配置项大全
👉推荐相关文章：Echart图表 之 颜色color配置项大全
👉推荐相关文章：Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全
👉推荐相关文章：Echart图表 之 legend图例组件配置项大全
👉推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全文章来源：https://www.toymoban.com/news/detail-819466.html
👉推荐相关文章：Echart图表 之 toolbox工具栏组件配置项大全文章来源地址https://www.toymoban.com/news/detail-819466.html
到了这里，关于十一、Echart图表 之 series-line折线图（面积图）基本使用与配置大全的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
