1. 先拆解需求隐藏线点文字里的“线、点、文字”分别指什么做前端可视化的人应该都经历过这种“一句话需求”。需求方可能只看了一眼别人家的动态大屏就说“我要一个 echarts 折线图要带波纹效果那些线、点、文字都给我去掉。”这种描述听起来很矛盾但如果你把“隐藏线点文字”拆成三个独立问题就会发现它其实说的是折线可以看不见原始数据点也可以不画数字标签更可以不显示唯独“波纹”这个动态效果得给我保留。这类需求在运维监控、数据大屏、汇报演示页里尤其常见。展示端通常不需要精确读数的折线而是要让人从视觉上感知“数据在上升”“当前值很重要”。如果把默认折线图直接摆出来线条、圆点、数值标签会全部挤在屏幕上视觉焦点被分散大屏的高级感也就没了。所谓“波纹”在这里就是 ECharts 中 effectScatter 系列自带的涟漪动画一个圆点周围不断向外扩散一圈半透明的圈看起来像水面泛起的波纹。这里的难点从来不是“能不能做”而是“配置入口太多容易漏”。隐藏线的、隐藏点的、隐藏文字的、隐藏坐标轴的各自有各自的参数而且彼此之间还会相互影响。下面我先把需求拆开再逐个击破。1.1 这类需求常出现在哪些场景真实诉求是什么我见过最多的是两种场景。第一种是“趋势背景板”。比如某个业务大屏的中间区域要放一条近 30 天的访问量变化曲线但旁边已经有具体的指标卡片在显示数值了折线图里再标数字就完全多余。需求方希望线条若隐若现甚至完全不出现只留下几个带波纹的节点告诉观看者“这里有重要数据点”。第二种是“关键点强调”。比如折线有 7 个点只有某个点命中阈值需要特别突出。这时需求方会要求把所有普通点隐藏只对那个关键点做涟漪动画。和第一种不同这种情况往往连“线”都还要保留只去掉普通节点和标签。从技术上来说这两种场景都可以用同一种方案实现底层放一个折线 series负责“趋势线”的绘制上层叠加一个 effectScatter series负责“波纹点”的绘制。至于哪条线显示、哪个点显示、哪些文字显示全部通过各自的配置项控制。理解了这一点后面的参数才能对号入座。1.2 关键选型折线 ripple 叠加还是单独 effectScatter很多人第一次做涟漪图会直接在新旧图里找某一个现成的 series 类型比如纠结“effectScatter 能不能直接连成线”或“line 系列能不能配置 rippleEffect”。结论很明确line 系列本身没有 rippleEffect 配置波纹动画只在 effectScatter 系列上生效而 effectScatter 只是散点图并不会自动把相邻点连成折线。所以接纳“双序列叠加”才是正路即一个type: line的序列负责底层折线尽量透明一个type: effectScatter的序列负责涟漪动画数据与折线一一对应。两个序列共用同一个类目轴数据顺序完全一致视觉上就会自然叠在一个坐标体系里。若只想要“点 波纹”连折线序列都可以不设但项目标题既然写了“折线图”多数情况下还要保留“线”的存在感至少在配置层面把线画出来再决定要不要让它可见。2. ECharts 里控制“线、点、文字”的配置入口一次讲全ECharts 的折线图默认会把线、点、文字全部亮出来。只看一张成品图你可能觉得这些元素是“长”在一起的但实际上它们属于不同的配置域。下面我把每个元素的控制入口单独拎出来讲搞懂之后隐藏操作就不再靠试了。2.1 隐藏“线”不是把 series 删掉而是让 lineStyle 消声折线图画出来的那条曲线由lineStyle控制。一个典型的line序列长这样{ type: line, data: [380, 520, 470, 680, 750, 610, 820], lineStyle: { color: #3b82f6, width: 2, type: solid } }这里的color、width、type一旦设置就会决定整条折线的外观。很多初学者会去找lineStyle.show这样的开关但 ECharts 的lineStyle里并没有show属性。想隐藏线有三种等效做法lineStyle.color设为transparent或rgba(0,0,0,0)lineStyle.opacity设为0lineStyle.width设为0。我建议至少同时用透明色和宽度为 0 两个手段。只把宽度设成 0在某些渲染环境下可能仍会有一像素残影只把透明度设成 0在代码审查时容易让别人误以为你在调透明度而非隐藏后续维护容易被人改回去。这里要强调一个细节隐藏折线不是删除line序列。如果你把序列删了散点图虽然也能渲染但“折线图”的语义就没有了。我们可以保留序列只让lineStyle失去视觉存在感这样后续想恢复只改一个颜色值即可。2.2 隐藏“点”showSymbol 和 symbol 要组合使用折线图中每个数据点位的圆形标记由symbol控制。默认情况下折线图的 symbol 是自动显示的所以你会看到每个数据点上都顶着一个圆点。隐藏它有两条路{ type: line, symbol: none, showSymbol: false }symbol: none表示“根本不绘制 symbol 图形”是最彻底的隐藏方式。showSymbol: false表示“默认状态下不显示 symbol”但它只管默认态。当鼠标 hover 到数据点附近时ECharts 的emphasis状态可能会重新把点位显示出来这就是很多人疑惑“明明关了 symbol悬停时怎么又冒出一个点”的原因。所以要想让点彻底消失两个配置一起上。symbol: none负责杜绝一切 symbol 绘制showSymbol: false负责关闭默认绘制逻辑双保险组合下来hover 时也不会平白无故蹦出标记。2.3 隐藏“文字”数据标签、坐标轴文字、图例要分开处理“隐藏文字”这四个字最容易引起歧义。折线图里的“文字”至少有四种位置配置项完全不同文字类型配置入口具体位置数据标签series.label.show: false每个数据点上方直接显示的数值尾标签series.endLabel.show: false折线末尾最后一个数据点旁边的文字X 轴刻度文字xAxis.axisLabel.show: false图表下侧的时间、类别名称Y 轴刻度文字yAxis.axisLabel.show: false图表左侧的数值刻度如果你只设置了series.label.show: false结果发现折线图下方的“周一、周二、周三”还在就会误以为配置失效。其实坐标轴文字和点位标签是两套体系要分别关。还有一项很容易忘的是图例也就是图表右上角“趋势”“高亮点”之类的系列名称。多序列叠加时默认会出现图例设置legend.show: false就能关掉。如果你的项目不需要坐标轴参考线还可以顺手关掉axisLine.show、axisTick.show、splitLine.show。很多大屏方案会把坐标轴整体藏起来只留最外侧的 padding 空间视觉更干净。3. 手把手实现只留波纹效果的折线图附可运行代码理论讲再多不如直接跑通一份代码。下面我以一份可直接粘贴运行的 HTML 为例说明双序列方案到底怎么写。这一节是整个实操的核心建议你把代码复制到本地跑一遍再逐行对照参数看效果。3.1 完整代码双 series 叠加实现“涟漪 隐藏线点文字”!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title波纹折线图 - 隐藏线点文字/title script srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/script style #chart { width: 800px; height: 400px; background: #0f172a; } /style /head body div idchart/div script const chart echarts.init(document.getElementById(chart)); const data [380, 520, 470, 680, 750, 610, 820]; const option { backgroundColor: transparent, grid: { left: 30, right: 30, top: 40, bottom: 30 }, xAxis: { type: category, data: [01, 02, 03, 04, 05, 06, 07], axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } }, yAxis: { type: value, min: 0, max: 1000, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } }, series: [ { name: 底层趋势, type: line, data: data, smooth: true, symbol: none, showSymbol: false, lineStyle: { color: transparent, width: 0 }, z: 1 }, { name: 波纹高亮点, type: effectScatter, data: data, symbol: circle, symbolSize: 12, itemStyle: { color: #fbbf24 }, label: { show: false }, rippleEffect: { period: 3, scale: 3, brushType: stroke }, z: 10 } ] }; chart.setOption(option); /script /body /html这段代码跑起来之后你看到的画面是深色背景上只有一排黄色圆点每个圆点在固定节奏下向外扩散一圈波纹原折线和所有数字都看不到。这就是标题里“隐藏线点文字”的最终效果。3.2 配置逐行拆解每个参数到底在关掉什么先看第一个 seriestype: line, smooth: true, symbol: none, showSymbol: false, lineStyle: { color: transparent, width: 0 }type: line声明这是一个折线序列。smooth: true让数据点之间的连线变成平滑曲线。虽然这条曲线最终看不见但在隐藏之前它至少承担了“折线图”的语义。symbol: none和showSymbol: false我把它们都写上就是前面说的双保险。只写showSymbol: false时hover 状态下圆点会临时出现两个一起写效果才算干净。lineStyle是关键。这里把color设为透明、width设为 0等于告诉渲染器曲线要画但颜色不可见、宽度为零结果就是无痕。如果你把这一行注释掉会发现一条蓝色曲线又冒出来了。再看第二个 seriestype: effectScatter, data: data, symbolSize: 12, rippleEffect: { period: 3, scale: 3, brushType: stroke }type: effectScatter是涟漪特效的载体。symbolSize控制中心圆点大小建议取值在 10 到 18 之间。rippleEffect是涟漪效果的核心配置period动画周期数值越大波纹扩散一个轮回所需时间越长看起来越慢scale波纹扩散的最终半径相对中心圆点的倍数数值越大波纹散得越开brushTypestroke表示描边式空心波纹fill表示填充式实心波纹两者视觉效果有明显差异。z: 1和z: 10是我的习惯做法。当两个序列在同一个 canvas 上叠加时z值大的会盖在z值小的上面。把波纹点设为 10可以确保它始终显示在最上层不会因为透明度、渲染顺序问题被折线序列盖住。3.3 想保留“部分文字”时怎么写比如只显示最大值有时需求方说“隐藏所有文字”但真正交付时要“只显示最高点那个数字”。这种情况下不要把所有label.show都设成false而是用formatter有选择地输出。在第二个 series 上做文章即可const maxValue Math.max(...data); // effectScatter 序列里 label: { show: true, color: #fff, fontSize: 14, formatter: function (params) { if (params.value maxValue) { return params.value; } return ; } }formatter函数会为每个数据点调用一次params.value就是该点的数值。只有当数值等于最大值时才返回要显示的文字其他点返回空字符串。这样渲染出来的效果是七个点各有涟漪但只有最高点上方冒出一个数字。如果你还想让坐标轴文字保留一部分不建议把axisLabel.show直接开成true那样整排刻度都会出现。更常用的做法是用formatter做“稀疏化”比如每两个刻度保留一个axisLabel: { show: true, interval: 1, color: #94a3b8 }interval: 1表示隔一个刻度显示一个文字视觉上既不会太空也不会显得密密麻麻。4. 踩坑实录为什么波纹出来了线和字却藏不干净只跑上面的示例通常能直接成功。但到了实际项目里面前往往不止这一个图表旁边还有别的折线图、柱状图配置稍一冲突隐藏效果就会出问题。下面这些坑我基本都踩过一遍整理成清单对你会有帮助。4.1 五个高频问题与解决方案现象根本原因解决方案折线一直是蓝色透明色没生效color: transparent在某些旧主题下被整体样式覆盖同时设置lineStyle.opacity: 0和width: 0点看起来没了鼠标移过去又出现只写了showSymbol: false没写symbol: none组合使用symbol: none与showSymbol: false数据标签关了但坐标轴文字还在混淆了series.label和axisLabel分别设置xAxis.axisLabel.show、yAxis.axisLabel.show波纹点正常但图例右上角空了一块多 series 默认打开图例忘了关闭设置legend.show: falsehover 时出现灰色提示框感觉很突兀默认tooltip一直开启若不需要可设置tooltip.show: false或保留但设置trigger: axis我自己见过最多的是第一和第二种。透明色被覆盖多半是因为项目里用了某种全局的color调色板或者代码里在setOption之后又做了一次样式合并。点还残留多半是只记得showSymbol: false不知道还有个symbol入口。顺带提一句如果把折线的lineStyle全部隐藏同时又把symbol设成none那么第一个lineseries 在画面上完全不可见。此时你看到的波纹点全部来自effectScatter。排查问题时如果发现只有一半的涟漪在动别急着怀疑动画先看看两个 series 的data顺序是不是一致。effectScatter在使用类目轴时数据位置是按数组顺序对齐的一旦数组顺序和折线不一致波纹点就会错位。4.2 让波纹更像真水的参数微调做到“能显示”不难但让涟漪看起来自然需要调一阵子。几个经验值供参考。中心圆点symbolSize不建议小于 8。太小的话波纹从圆点边缘扩散视觉上会像一颗小钉子在抖动没有“水波”感。也不要超过 20否则会遮住相邻数据点。rippleEffect.period控制在 2 到 4 之间。数字越小波纹扩散越快越大越像慢动作。大屏氛围一般用 3 左右比较舒服。rippleEffect.scale控制在 2.5 到 4 之间。小于 2波纹还没散开就消失大于 4波纹会跨到相邻的数据点区域视觉上容易重叠。brushType的stroke比fill更适合深色背景大屏。空心描边波纹轻盈、不抢焦点实心填充波纹更有重量感适合强调单个报警点。此外effectScatter有一个showEffectOn参数默认行为是渲染完成后就开始波纹动画。如果你希望点平时静止鼠标移到上面才出现涟漪可以设置showEffectOn: emphasis这个参数在数据量特别大时非常实用。试想一串 30 个点的折线如果 30 个点同时不停地扩散波纹整个画面会像布满气泡一样乱。用showEffectOn: emphasis后默认只有静态圆点想看哪个点就让鼠标逼近哪个点视觉焦点可控很多。4.3 用 zlevel 处理多层图表盖住的涟漪在实际大屏中折线图不一定独立占一块区域也可能是一块组合面板里的一个小 chart。如果涟漪效果被底层的渐变背景或另一张图表的标签盖住很多人会调z但发现调来调去不起作用。这里要理解z和zlevel的区别。z只影响同一个 canvas 层内的图形顺序zlevel则用于创建独立的 canvas 层。多个zlevel之间后创建的层整体叠在先创建的层上面。日常项目里我建议优先用z因为简单、可控。只有遇到“涟漪点必须浮在图表外的悬浮组件之上”这种需求时才考虑给effectScatter单独设置zlevel: 1。但要注意一旦设置zlevel该系列的坐标轴关联不会变只是渲染层变了透明背景错乱的情况也可能出现。大多数情况下z配一个大数值就是够用的。5. 把这篇里的经验沉淀成可复用参数模板到这里核心思路已经完整了。我再分享一套自己惯用的“深色大屏低调波纹”配置模板直接把上一节的代码升级一下适合直接放进真实项目里微调。5.1 一套适合深色大屏的配置片段const baseColor #3b82f6; const glowColor #fbbf24; const option { backgroundColor: transparent, grid: { left: 20, right: 20, top: 40, bottom: 20 }, xAxis: { type: category, data: categories, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } }, yAxis: { type: value, min: 0, splitLine: { show: true, lineStyle: { type: dashed, color: #1e293b } }, axisLabel: { show: false } }, series: [ { name: 趋势线, type: line, data: rawData, smooth: true, symbol: none, showSymbol: false, lineStyle: { color: transparent, width: 0 }, z: 1 }, { name: 波纹点, type: effectScatter, data: rawData, symbol: circle, symbolSize: 14, showEffectOn: render, itemStyle: { color: glowColor, shadowBlur: 10, shadowColor: rgba(251, 191, 36, 0.6) }, label: { show: false }, rippleEffect: { period: 3, scale: 3, brushType: stroke }, z: 10 } ] };这套模板里我保留了yAxis.splitLine的虚线但把文字全部关掉。这样观看者能隐约感知纵轴刻度却不会被数字干扰。shadowBlur和shadowColor是给中心圆点加一层光晕让波纹点看起来更有质感。如果你用的是亮色背景可以把底色换成浅灰发光色换成橙色或红色效果仍然成立。5.2 关于“隐藏”本身的一个提醒最后聊一个容易被忽视的点完全隐藏文字确实能让图表好看但不等于把图表的可读性也一起杀掉。我实际交付大屏项目时通常不会把 Y 轴数字完全隐藏而是保留最左侧的一两个刻度作为参考。原因很简单业务方盯着大屏看数据的时候如果某个数字暴跌他们需要立刻知道跌到了什么量级。我的做法是完整隐藏 X 轴文字Y 轴每隔一个刻度显示一个数字并且把波纹点旁边的标签只显示最大值。如果想连最大值标签都不显示就把label.show设为false但在tooltip里保留数值鼠标悬停时照样能看到每个点的精确值。这样既不破坏画面的干净感也不牺牲数据分析的基本能力。“隐藏”不等于“没有”而是把信息从常态化展示变成按需展示。带着这个原则去调整参数你的 ECharts 折线图就不会只是一张炫技的空壳而是真正能放进项目里长期使用的可视化方案。