? 作者主页：?仙女不下凡?
? 前言介绍：以下?内容是我个人对于该技术的总结，如有不足与错误敬请指正！
? 欢迎点赞? 收藏⭐ 留言? 相关账号会持续发布关于文章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提示框组件配置项大全
?推荐相关文章：Echart图表 之 toolbox工具栏组件配置项大全