ECharts markline（标记线）

在使用 ECharts 的折线图时如果想在特定的数据点上添加标记线markline可通过配置markLine属性来实现。主要用途标识平均值、最大值、最小值标记阈值线或目标线划分数据区域添加自定义参考线核心配置项markLine: { silent: false, // 是否不响应鼠标事件 symbol: [none, none], // 线段两端的符号 label: { show: true }, // 标签显示 lineStyle: { /* 样式配置 */ }, data: [ /* 标线数据 */ ] }MarkLine 关键配置详解1.标线类型统计型type: average平均值、min最小值、max最大值固定值型yAxis: 数值或xAxis: 数值line 垂直线两点连线型使用数组形式定义起点和终点坐标2.样式定制lineStyle: { type: solid, // 线型solid, dashed, dotted width: 2, color: #ff0000, opacity: 0.8, curveness: 0.2 // 曲线程度0为直线 }3.标签配置label: { show: true, position: middle, // start, middle, end formatter: {b}: {c}, // 自定义格式化 color: #fff, backgroundColor: #333, borderColor: #555, borderWidth: 1, borderRadius: 4, padding: [4, 8] }4.符号配置symbol: [circle, arrow], // 起点和终点符号 symbolSize: [8, 12], // 符号大小 symbolRotate: 45 // 符号旋转角度完整示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleECharts 折线图 MarkLine 示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script style * { margin: 0; padding: 0; } body { font-family: Segoe UI, Arial, sans-serif; line-height: 1.6; color: #333; padding: 20px; background-color: #f8f9fa; } .container { max-width: 1200px; margin: 0 auto; } header { text-align: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 2px solid #eee; } h1 { color: #2c3e50; margin-bottom: 10px; } .subtitle { color: #7f8c8d; font-size: 16px; } .chart-container { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 40px; } .chart-box { flex: 1; min-width: 500px; height: 450px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 20px; } .chart-title { font-size: 18px; color: #2c3e50; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .code-container { background: #282c34; color: #abb2bf; border-radius: 8px; padding: 20px; overflow-x: auto; margin-top: 30px; font-family: Consolas, Monaco, monospace; } .code-title { color: #61afef; margin-bottom: 10px; font-size: 18px; } .explanation { background: #e8f4fd; border-left: 4px solid #1890ff; padding: 15px; margin: 20px 0; border-radius: 4px; } .explanation h3 { color: #1890ff; margin-bottom: 8px; } .legend { display: flex; flex-wrap: wrap; gap: 15px; margin: 15px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; } .legend-item { display: flex; align-items: center; gap: 8px; } .legend-color { width: 16px; height: 16px; border-radius: 3px; } /style /head body div classcontainer header h1ECharts 折线图 MarkLine 使用详解/h1 p classsubtitle标线(MarkLine)用于标识平均值、阈值、目标值等参考线/p /header div classchart-container div classchart-box h2 classchart-title基本用法 - 平均值与阈值线/h2 div idchart1 stylewidth: 100%; height: 400px;/div div classlegend div classlegend-item div classlegend-color stylebackground-color: #5470c6;/div span销售额/span /div div classlegend-item div classlegend-color stylebackground-color: #91cc75;/div span平均线 (平均值)/span /div div classlegend-item div classlegend-color stylebackground-color: #fac858;/div span目标线 (Y轴固定值)/span /div div classlegend-item div classlegend-color stylebackground-color: #ee6666;/div span警戒线 (最大值)/span /div /div /div div classchart-box h2 classchart-title高级用法 - 自定义标线与区域/h2 div idchart2 stylewidth: 100%; height: 400px;/div div classlegend div classlegend-item div classlegend-color stylebackground-color: #73c0de;/div span用户增长/span /div div classlegend-item div classlegend-color stylebackground-color: #fc8452;/div span起始点连线/span /div div classlegend-item div classlegend-color stylebackground-color: #9a60b4;/div span区间标线/span /div /div /div /div div classexplanation h3MarkLine 主要配置说明/h3 p1. strong内置类型/strong: 可以直接使用 average(平均值), min(最小值), max(最大值)/p p2. strong自定义数值/strong: 通过 yAxis 或 xAxis 指定具体数值位置/p p3. strong两点连线/strong: 通过指定两个坐标点 [{coord: [x1, y1]}, {coord: [x2, y2]}] 创建连线/p p4. strong样式定制/strong: lineStyle 控制线条样式label 控制标签显示/p /div div classcode-container div classcode-title核心代码示例/div precode// MarkLine 基本配置结构 markLine: { // 是否静默即不响应和触发鼠标事件 silent: false, // 标线两端的标记类型可以是一个数组分别指定两端 symbol: [none, none], // 标签设置 label: { show: true, position: end, // 标签位置: start, middle, end formatter: {b}: {c} // b为名称c为值 }, // 线条样式 lineStyle: { type: solid, // solid, dashed, dotted width: 2, color: #91cc75 }, // 标线数据支持多种格式 data: [ // 1. 内置类型平均值 { type: average, name: 平均值 }, // 2. Y轴固定值 { yAxis: 80, name: 目标线 }, // 3. 最大值/最小值 { type: max, name: 最大值 }, // 4. 两点连线 [ { coord: [0, 100], symbol: none }, { coord: [3, 100], symbol: none } ], // 5. 自定义标签和样式 { yAxis: 60, name: 警戒线, lineStyle: { type: dashed, color: #ee6666 }, label: { formatter: 警戒线: {c}, position: insideStartTop } } ] }/code/pre /div /div script // 示例数据 const months [1月, 2月, 3月, 4月, 5月, 6月, 7月, 8月, 9月, 10月, 11月, 12月]; const salesData [65, 78, 86, 95, 120, 135, 150, 145, 130, 115, 95, 80]; const userGrowth [100, 150, 230, 340, 420, 500, 610, 720, 850, 920, 980, 1050]; // 初始化图表1基本用法 const chart1 echarts.init(document.getElementById(chart1)); const option1 { title: { text: 2023年月度销售额, left: center, textStyle: { fontSize: 16 } }, tooltip: { trigger: axis, formatter: function(params) { let result ${params[0].name}br/; for (let i 0; i params.length; i) { const param params[i]; let marker param.marker; let value param.value; // 如果是标线特殊处理 if (param.componentType markLine) { marker ─; value param.value; } result ${marker} ${param.seriesName}: ${value}br/; } return result; } }, legend: { data: [销售额, 平均线, 目标线, 警戒线], top: 30 }, grid: { left: 3%, right: 4%, bottom: 3%, top: 15%, containLabel: true }, xAxis: { type: category, data: months, boundaryGap: false }, yAxis: { type: value, name: 销售额(万元), min: 0, max: 180 }, series: [ { name: 销售额, type: line, smooth: true, data: salesData, itemStyle: { color: #5470c6 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: rgba(84, 112, 198, 0.5) }, { offset: 1, color: rgba(84, 112, 198, 0.1) } ]) }, markLine: { silent: true, symbol: [none, none], data: [ // 1. 平均值线 { type: average, name: 平均值, lineStyle: { type: solid, width: 2, color: #91cc75 }, label: { show: true, position: end, formatter: 平均: {c} } }, // 2. 固定值线 (目标线) { yAxis: 100, name: 目标线, lineStyle: { type: dashed, width: 2, color: #fac858 }, label: { show: true, position: end, formatter: 目标: {c} } }, // 3. 最大值线 (警戒线) { type: max, name: 警戒线, lineStyle: { type: dashed, width: 2, color: #ee6666 }, label: { show: true, position: end, formatter: 峰值: {c} } } ] } } ] }; // 初始化图表2高级用法 const chart2 echarts.init(document.getElementById(chart2)); const option2 { title: { text: 用户增长趋势与标线示例, left: center, textStyle: { fontSize: 16 } }, tooltip: { trigger: axis }, grid: { left: 3%, right: 4%, bottom: 3%, top: 15%, containLabel: true }, xAxis: { type: category, data: months, boundaryGap: false }, yAxis: { type: value, name: 用户数, min: 0, max: 1200 }, series: [ { name: 用户增长, type: line, smooth: true, data: userGrowth, itemStyle: { color: #73c0de }, lineStyle: { width: 4 }, markLine: { symbol: [circle, arrow], symbolSize: [6, 12], data: [ // 1. 起始点连线 [ { coord: [0, userGrowth[0]], symbol: circle, symbolSize: 8 }, { coord: [11, userGrowth[11]], symbol: arrow, symbolSize: 12, symbolRotate: 45 } ], // 2. 区间标线连接两个数据点 [ { coord: [2, userGrowth[2]], symbol: none }, { coord: [8, userGrowth[8]], symbol: none } ], // 3. 多条水平参考线 { yAxis: 300, name: 第一阶段, lineStyle: { type: dashed, width: 1, color: #9a60b4 }, label: { show: true, position: end, formatter: 阶段一 } }, { yAxis: 600, name: 第二阶段, lineStyle: { type: dashed, width: 1, color: #9a60b4 }, label: { show: true, position: end, formatter: 阶段二 } }, { yAxis: 900, name: 第三阶段, lineStyle: { type: dashed, width: 1, color: #9a60b4 }, label: { show: true, position: end, formatter: 阶段三 } } ], lineStyle: { type: solid, width: 2, color: #fc8452 }, label: { show: true, position: middle, color: #fff, backgroundColor: #fc8452, padding: [2, 6], borderRadius: 4 } } } ] }; // 渲染图表 chart1.setOption(option1); chart2.setOption(option2); // 响应窗口大小变化 window.addEventListener(resize, function() { chart1.resize(); chart2.resize(); }); /script /body /html