★ FEATURED ARTICLE 做数据可视化看板的时候折线图是最常用也最容易做“糙”的图。很多人用 pyecharts 拉一个默认样式的折线图坐标轴、图例、悬浮提示全用默认值出来的图不能说错但就是没有“产品感”。其实 pyecharts 的折线图稍微往下挖一挖能玩的东西非常多。这篇我一次讲透五个进阶点多页面切换、渐变色填充、面积图效果、鼠标悬浮信息定制、以及多系列堆叠。这些功能并不只是“好看”它们分别解决实际痛点多个图表放一页放不下的布局问题、单条线太单调的视觉问题、指标之间累加关系的表达问题、以及用户看数据时“想知道具体值却要猜”的交互问题。适合正在做数据报表、运营看板、监控大屏或者单纯想把图表做得更专业的 Python 开发者和数据分析师。我把配置逻辑、代码细节、以及我实际踩过的坑一并整理出来直接照着抄即可。1. 折线图进阶功能的设计思路先想清楚每个功能解决什么问题很多人一上来就套 API先is_areaTrue加上去看看效果。这种试错不是不对但当你同时要组合五个功能的时候脑子里必须有一张“功能-问题”的对应表否则组合出来只会是一堆视觉噪音。1.1 多页面转换解决的是信息容量问题一张折线图的承载能力有限。当你手里有 6 组指标、每组 4 个渠道的数据硬塞进一张图里结果就是图例占半屏线条像一团乱麻。此时需要的是“分页面”而不是“分图”。pyecharts 里做多页面主要有两种姿势Tab()标签页切换和Page()滚动翻页。这两种的适用场景完全不同。Tab()适合“并列对比”的场景——比如一个是销售额走势一个是用户增长两者没有数据叠加关系放在标签页里让用户自己点。Page()适合“向下阅读”的场景——比如从概览到明细再到结论有叙事顺序的。很多教程只说“用 Tab 组合图表”从来不提什么时候不该用 Tab。我自己的经验是只要两个图表不是合作关系而是递进关系就用 Page别偷懒。1.2 渐变色和面积图解决的是视觉层级问题折线图默认是很“朴素”的一条细线配上坐标轴完事。这种图看数值没问题但是看趋势的“体感”很差。渐变面积图的本质是给视觉一个“区域”概念——当你看到一块从深到浅的色带第一反应是这个数值区间的整体规模而不是某一天的精确值。这种从“线”到“面”的视觉升级不是纯粹为了花哨它确实能加快人对数据的感知速度。而渐变色的使用又比纯色块更进一步。纯色面积图的问题在于色块太“死”边缘和背景的割裂感很强。用一个线性渐变从实色过渡到接近透明视觉上面积图就像从背景里“长出来”的融合度高很多。这一条在做汇报大屏的时候尤其重要底色深色时渐变的优势会更明显。1.3 堆叠功能解决的是构成关系表达问题堆叠折线图很多人第一反应是“把多条线加起来展示”。这个理解只对了一半。堆叠的核心价值在于表达“构成”。比如你有三个渠道的流量折线图三条线各走各的你看到的是每个渠道的独立波动一旦用了stack三条线就变成了“从上到下依次累积”的层带每一项的高度不再是它自己的数值而是它自己和下方所有项之和。这时候你能直观看出的是“整体规模”和“结构占比”的实时变化。这里有个特别值得注意的点堆叠之后中间那条线其实已经“失真”了——它展示的是累计值而不是实际值。如果你的业务方要看真实数值堆叠图就不合适如果看的是结构趋势堆叠就是神器。选型时务必把这个问题想清楚。1.4 鼠标悬浮信息解决的是信息可达性问题默认的悬浮提示tooltip只显示系列名和数值太“干”了。但悬浮提示其实是你和用户唯一的“主动交互”窗口——用户鼠标悬停系统给反馈。这个窗口可以做很多事显示同一点位多个指标的值、显示同比环比、用颜色区分指标、甚至展示一段文字结论。我见过有同学为了显示额外信息硬把备注写在图标里比如“3月受促销影响”把坐标轴挤得乱七八糟。正确的做法是全部塞进悬浮提示让图表保持干净需要细节时用户自己悬停。这是典型的“默认整洁 按需展开”的设计模式。2. 核心配置项拆解从参数到原理这一节我把五个功能对应的 API 挨个拆开讲解。我会标注哪些参数在 pyecharts 2.x 里已经换了写法避免你用旧教程的语法跑出报错。2.1 构建折线图前必须明确的两个版本问题pyecharts 1.x 和 2.x 在折线图相关 API 上有不少差异。最典型的就是堆叠旧版本用is_stackTrue新版本改为在add_yaxis里面传stacktotal。还有面积图旧版本有is_areaTrue这种参数新版本统一走areastyle_optsAreaStyleOpts(...)。如果你在网上搜到旧代码直接跑大概率会报TypeError或者看到参数被忽略的警告。提示不确定自己装的是哪个大版本直接print(pyecharts.__version__)。如果是2.x就按本文的写法来如果是1.x建议直接升级2.x 的链式调用和类型提示友好太多了。2.2 面积图配置的两种写法实现面积图的核心是调用AreaStyleOpts。但代码里你可能会看到两种写法我建议新项目统一用第二种第一种是老代码里常见的line.add_yaxis( 销售额, data, is_areaTrue, area_opacity0.3 )这种写法在 2.x 里已经不被推荐is_area的默认行为改了area_opacity也是旧概念。第二种是 2.x 写法from pyecharts.options import AreaStyleOpts line.add_yaxis( 销售额, data, areastyle_optsAreaStyleOpts(opacity0.3) )背后的逻辑很简单areastyle_opts负责所有跟面积填充相关的视觉配置包括透明度、颜色、边框全部收敛到一个对象里。这样做的好处是配置项有清晰的命名空间IDE 自动补全也友好得多。2.3 渐变色的正确打开方式JsCode LinearGradientpyecharts 底层是 ECharts所以渐变这类“高级视觉功能”本质上要写 JavaScript。这是很多 Python 开发者不习惯的地方你不是在配置 Python 对象你是在往生成好的 JS 配置里注入一段代码。pyecharts 专门提供了一个JsCode类用于把一段 JS 字符串原样塞进最终的配置。渐变面积图的写法长这样from pyecharts.commons.utils import JsCode line_style JsCode( new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: rgba(31, 119, 180, 0.6)}, {offset: 1, color: rgba(31, 119, 180, 0.05)} ]) ) line.add_yaxis( 销售额, data, areastyle_optsAreaStyleOpts(colorline_style) )注意LinearGradient的四个参数(x0, y0, x1, y1)表示渐变方向。(0, 0, 0, 1)是垂直向下从顶部到底部如果你想要水平渐变用于折线本身的描边就写(0, 0, 1, 0)。这个渐变方向的选择不是随意的。面积图默认从数值“顶线”往下铺到底部所以通常用垂直渐变顶部接近线的真实颜色、较深底部逐渐透明视觉上与横轴“融解”掉。如果你反向会显得色带悬空很不自然。2.4 堆叠配置的要点stack 名称决定堆叠组add_yaxis里的stack参数值是一个字符串相同字符串的系列会累加堆叠。这个“相同字符串”是全局匹配的也就是说同一张图里不同的 stack 值可以存在但一般不要混用——容易让用户产生误导。line.add_yaxis(渠道A, data_a, stacktotal, areastyle_opts...) line.add_yaxis(渠道B, data_b, stacktotal, areastyle_opts...) line.add_yaxis(渠道C, data_c, stacktotal, areastyle_opts...)这里三个系列的 stack 都是total它们就会按顺序堆叠。我试用过不同的命名比如a、b、c结果三条线完全不堆叠因为它们的堆叠组不同。这就是 stack 最容易踩的坑你配置了堆叠但忘了检查所有系列的 stack 值是否一致。堆叠和面积的组合非常常见。当你把面积图、堆叠、半透明勾选组合在一起得到的就是一张“河流图”风格的层带图适合看总量走势和结构占比。颜色要选同色系但不同深浅否则堆叠后边界模糊反而看不出来层次。2.5 悬浮信息的定制trigger 与 formattertooltip 两块关键配置trigger和formatter。trigger有两种取值item是鼠标悬浮到具体数据点上触发axis是悬浮到该 X 坐标位置时触发显示当前坐标轴下所有系列的数据。折线图我几乎总是用axis因为折线图的核心是“同一横轴位置的对比”而不是孤零零的单点。formatter是要展示的内容模板。有两种实现方式一种是纯字符串模板基于 ECharts 的模板语法另一种是JsCode写完整 JS 函数。模板方式的简单示例from pyecharts.options import TooltipOpts line.set_global_opts( tooltip_optsTooltipOpts( triggeraxis, formatter{b}br/{a0}: {c0}br/{a1}: {c1} ) )但这只解决了“显示”还没解决“可读性”。JS 函数方式更灵活可以给数值加单位、加千分位分隔符、甚至根据数值大小改变文字颜色。文章第三节我会给出一个完整可用的格式化函数。3. 实操从零构建一个多页面折线图看板到代码环节了。我会构建一个包含两个页面的标签页看板第一页是渐变面积图 自定义悬浮信息第二页是三个渠道的堆叠面积图。这样五个功能全部覆盖。3.1 准备数据与基础环境假设场景是某产品团队要看连续的 12 周运营数据。三组指标曝光量、点击量、转化量以及三个投放渠道的点击量构成。用 pandas 生成模拟数据import pandas as pd import numpy as np np.random.seed(42) weeks [f第{i}周 for i in range(1, 13)] df pd.DataFrame({ week: weeks, expose: np.random.randint(8000, 15000, 12), click: np.random.randint(2000, 6000, 12), convert: np.random.randint(500, 1800, 12), }) df[cvr] (df[convert] / df[click] * 100).round(2)同时在下方准备三个渠道的分点击数据channel_a np.random.randint(800, 2500, 12) channel_b np.random.randint(600, 2000, 12) channel_c np.random.randint(400, 1500, 12)提示np.random.seed(42)是为了让数据可复现。你实际做看板时数据源换成数据库查询结果即可这部分没差别。3.2 页面一带渐变色的面积图与悬浮信息页面一展示曝光量和转化率两条线。曝光量用渐变面积图体现规模转化率用普通细线展示趋势。from pyecharts.charts import Line from pyecharts import options as opts from pyecharts.commons.utils import JsCode def gradient_area_chart(): line Line(init_optsopts.InitOpts(width1200px, height600px)) line.add_xaxis(df[week].tolist()) line.add_yaxis( 曝光量, df[expose].tolist(), is_smoothTrue, is_symbol_showFalse, linestyle_optsopts.LineStyleOpts(width3, color#1F77B4), areastyle_optsopts.AreaStyleOpts( colorJsCode( new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: rgba(31, 119, 180, 0.65)}, {offset: 1, color: rgba(31, 119, 180, 0.02)} ]) ) ), ) line.add_yaxis( 转化率, df[cvr].tolist(), is_smoothTrue, is_symbol_showTrue, linestyle_optsopts.LineStyleOpts(width2, color#FF7F0E, type_dashed), ) line.set_series_opts( label_optsopts.LabelOpts(is_showFalse) ) line.set_global_opts( title_optsopts.TitleOpts(title曝光量与转化率走势), tooltip_optsopts.TooltipOpts( triggeraxis, formatterJsCode( function(params) { var res b params[0].axisValue /bbr/; for (var i 0; i params.length; i) { var val params[i].value; if (params[i].seriesName 转化率) { val val %; } res span styledisplay:inline-block;width:12px;height:12px; background: params[i].color ;border-radius:50%; margin-right:6px;/span params[i].seriesName : val br/; } return res; } ), ), legend_optsopts.LegendOpts(pos_top3%), ) return line这一段有个细节我多解释两句params[i].color在 ECharts 里默认是该系列的主色正好用做悬浮信息里的小圆点颜色。如果你用默认模板颜色标记不会出现多系列悬浮是纯文字罗列视觉归属性很弱。加上这个小圆点用户一眼就知道这条信息属于哪条线。is_symbol_showFalse表示不显示每个数据点的圆点标记。数据点不再是考试重点时建议关掉让图更干净。注意我在“转化率”这一条上又开了is_symbol_showTrue因为转化率只有 12 个点开着点反而能引导视线聚焦波动。3.3 页面二三渠道堆叠面积图页面二看渠道构成。三组数据全部 stack 成组同样使用渐变色但为了区分三个渠道的渐变色要选有梯度的色系。def stacked_channel_chart(): line Line(init_optsopts.InitOpts(width1200px, height600px)) line.add_xaxis(weeks) color_schemes [ (渠道A, channel_a, #2E8B57), (渠道B, channel_b, #3CB371), (渠道C, channel_c, #98FB98), ] for name, data, color in color_schemes: line.add_yaxis( name, data.tolist(), stacktotal, is_smoothTrue, is_symbol_showFalse, linestyle_optsopts.LineStyleOpts(width1), areastyle_optsopts.AreaStyleOpts( opacity0.35, colorJsCode( new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: color 50}, {offset: 1, color: color 00}]) ), ), ) line.set_series_opts(label_optsopts.LabelOpts(is_showFalse)) line.set_global_opts( title_optsopts.TitleOpts(title渠道点击量堆叠构成), tooltip_optsopts.TooltipOpts( triggeraxis, formatterJsCode( function(params) { var res b params[0].axisValue /bbr/; var total 0; for (var i 0; i params.length; i) { total params[i].value; } for (var j 0; j params.length; j) { var pct (params[j].value / total * 100).toFixed(1); res span styledisplay:inline-block;width:12px;height:12px; background: params[j].color ;border-radius:50%; margin-right:6px;/span params[j].seriesName : params[j].value ( pct %)br/; } res b合计: total /b; return res; } ), ), legend_optsopts.LegendOpts(pos_top3%), ) return line堆叠之后 tooltip 的返回值有个特殊现象ECharts 默认在堆叠模式下params里每个系列的 value 已经是“从底部累加到当前层”的累计值而不是该层自身的增量。需要拿到增量得自己在 JS 里做减法从下往上遍历当前项减去前一项的累计值。上面这段代码我故意没做这个减法是直接展示“构成占比”场景当业务方想看每个渠道的占比时用累计值计算占比反而更方便。但如果你业务上要显示的是“本渠道实际点击量”就需要额外处理这个坑我放在第四节详细说。3.4 使用 Tab 组合多页面两个页面画完之后用 Tab 组件组合。这是 pyecharts 里最直观的“多页面转换”方式from pyecharts.charts import Tab def make_tab(): tab Tab() tab.add(gradient_area_chart(), 曝光/转化) tab.add(stacked_channel_chart(), 渠道构成) return tab if __name__ __main__: tab make_tab() tab.render(line_dashboard.html)Tab.add()的第一个参数是图表实例第二个参数是标签页标题。一个 Tab 里的标签页标题不能重复否则前端点击时定位会乱。如果你想要的是“上下滚动”而不是“标签切换”把Tab换成Page代码基本不用改from pyecharts.charts import Page page Page(layoutPage.SimplePageLayout) page.add(gradient_area_chart()) page.add(stacked_channel_chart()) page.render(line_dashboard_page.html)Page.SimplePageLayout可以使每个图表独立宽度展示避免默认的响应式布局把图表压缩得矮胖。这个参数经常被忽略很多人用了 Page 之后发现图特别矮就是忘了这个。3.5 完整效果与实际运行说明运行render之后会生成一个独立的 HTML 文件浏览器直接打开即可。整个过程不需要 Java 环境不需要 Flask也不需要后端服务。HTML 文件内嵌了 ECharts 的 JS 库无论你后面是把文件扔到静态服务器还是本地直接双击打开效果一致。我实测下来生成的 HTML 体积大概 1MB 左右其中有接近 1MB 是 echarts.min.js 本身。如果部署在内网看板可以后续单独抽离 JS 做 CDN 加速如果只是本地演示给别人看默认就行。视觉上的效果是这样第一页顶部是一块由深到浅的蓝色面积带带着平滑曲线右侧一条橙色虚线穿插其中鼠标滑过任意一周悬浮框里上下排列曝光量和转化率曝光量是整数、转化率带百分号左侧各有一个对应颜色的圆点。第二页是三层绿色系层带从上到下颜色逐渐变浅变亮堆叠边界曲线平滑悬浮框里除了显示当前周的三个渠道数值和占比底部还有一个加粗的合计值。4. 实际踩过的坑问题排查与避坑技巧这一节全是实操中会真实碰到的坑能帮你省下不少翻源码的时间。4.1 问题速查表从报错到样式六个典型问题问题一堆叠图的 tooltip 数值“对不上”现象三条渠道数据分别是 100、200、300堆叠后第二条线的 tooltip 却显示 300第三条显示 600。原因ECharts 原生堆叠模式下params[i].value返回的是累计值不是该系列原始值。解决在 formatter 里自行做差。var prev 0; for (var i 0; i params.length; i) { var rawVal params[i].value - prev; prev params[i].value; }当业务方要求展示“每个渠道自身的值”时必须用这种写法。如果只关注占比直接拿累计值算比例也行但要和业务方确认口径。问题二JSCode 渐变没生效面积图是纯色原因AreaStyleOpts(colorJsCode(...))里的 JS 字符串必须是一个完整的表达式不能是语句有些复制来的代码在LinearGradient末尾漏了分号或花括号导致前端 JS 解析失败ECharts 自动 fallback 到默认色。排查方法打开生成的 HTML找到对应 series 的 areaStyle 字段直接复制 color 的值到浏览器控制台执行看是否有语法报错。问题三Tab 切换后图表高度“塌了”原因Tab 组件对初始化宽度和高度的处理并不总是完美尤其当你在InitOpts里指定了像素宽高而外层容器宽度是自适应的切换时渲染时机不同可能导致高度计算为 0。解决InitOpts里统一指定明确的像素宽高不要混用百分比。问题四堆叠面积图之间有细白线原因多个半透明面积图堆叠时相邻两层的边界透明度叠加会产生视觉上的亮线。这不是 bug但影响观感。解决把opacity提高到 0.5 以上或者给各层描边LineStyleOpts(width1, color#fff)有意制造分割线反而会干净一些。问题五折线图平滑后首尾数据出现“甩尾”现象开启了is_smoothTrue第一条曲线在起点之前和终点之后有明显的大幅摆动。原因ECharts 的平滑算法在首尾处用默认端点拟合如果数据只有 6 到 12 个点甩尾特别明显。解决数据量少时不要开is_smooth保持折线直连。或者至少知道这个特性别在展示前被打个措手不及。问题六formatter 里面有中文输出乱码原因JsCode内的字符串直接进入 HTML如果页面编码声明缺失中文就乱。解决render()生成的 HTML 默认带 UTF-8 声明但如果你手动拼接 HTML 或模板渲染时改动了编码就必现乱码。确保最终交付的 HTML 中包含meta charsetutf-8。4.2 几个我自己总结的实操习惯第一打印输出检查配置。每次render之前我心里没底时就先print(line.dump_options_with_echarts())看生成出来的 JSON 是否符合预期。尤其是 JsCode、渐变、stack 这些动态配置打印出来亲自确认一遍比反复刷新浏览器高效得多。第二系列名称尽量用短字符串。series 名称会同时出现在图例、tooltip、默认的 aria 信息里。名称太长图例自动换行后会把布局挤乱。用“曝光量”“转化率”没问题但“搜索引擎渠道_华东区域_2024年活动”这种就过分了建议用别名映射。第三、颜色统一由数据主题决定。不要在绘图函数里各自取色。我习惯在最顶部定义色板字典COLOR_MAP { 渠道A: #2E8B57, 渠道B: #3CB371, 渠道C: #98FB98, }后续所有系列的线色、渐变色、悬浮圆点颜色都从字典取。这样改起来只动一处主题一致性也不会被破坏。第四单位口径写进 tooltip不写进标题。我在 3.2 的例子里做了演示转化率在 tooltip 里拼上%曝光量保持整数。这个习惯看起来微不足道但对使用图表的人来说是决定性的——不用再自己猜单位也不用把鼠标移开去看坐标轴格式。5. 这套能力的延伸方向做实操项目时这五个功能很少单独出现它们往往是一个更大看板里的组件。折线图做完下一步很自然就是跟柱状图、饼图甚至地图组合。pyecharts 的Grid组件可以横向组合多张图通常你会把折线图和柱状图放进同一个 Grid形成“趋势对比”的综合视图。多页面的概念可以继续扩大第一页放综合趋势第二页放渠道拆分第三页放地理位置分布整体用一个Tab串起来就是一个轻量级数据产品的雏形。我个人把这种能力理解成“图表模块化”每一个绘图函数只负责一张图输入是 DataFrame输出是一个配置好的 Chart 实例再在外层组合。这样代码维护起来非常轻松业务上要加一个页面就加一个函数再注册到 Tab完全没有结构性成本。如果时间允许建议再补两个方向一个是数据更新自动化把render()包装成一个定时任务每次跑完自动把 HTML 推送到静态目录另一个是嵌入到 Web 应用里通过 Flask 或者 FastAPI 返回 HTML 片段。但作为第一步先在本地把这五种图的配置逻辑吃透后面的扩展自然水到渠成。
阅读完成 · 觉得有帮助？
