每日五个pyecharts可视化图表-line：从入门到精通（4）

欢迎来到pyecharts折线图系列的第四篇文章！在前三篇中，我们已经掌握了多种折线图类型，包括基本折线图、平滑折线图、雨量流量关系图、多X轴折线图、堆叠区域图和阶梯图等。在本文中，我们将继续探索五种更高级的折线图类型，帮助您进一步提升数据可视化技能。pyecahts源码在这里插入图片描述

- 图表1：渐变背景折线图——炫酷视觉效果的实现
- - 代码解释：
  - 应用场景：
  - 注意事项：
- 图表2：平滑折线图——数据趋势的流畅展示
- - 代码解释：
  - 应用场景：
  - 注意事项：
- 图表3：自定义标记点折线图——突出显示关键数据
- - 代码解释：
  - 应用场景：
  - 注意事项：
- 图表4：分段颜色折线图与峰值标记——用电量分布分析
- - 代码解释：
  - 应用场景：
  - 注意事项：
- 图表5：高级渐变背景折线图与Grid布局——专业数据展示
- - 代码解释：
  - 应用场景：
  - 注意事项：
- 总结

图表1：渐变背景折线图——炫酷视觉效果的实现

渐变背景折线图通过设置渐变色背景和区域填充，使图表具有更炫酷的视觉效果。这种图表特别适合用于演示和汇报，能够吸引观众的注意力，同时清晰地展示数据趋势。

import pyecharts.options as opts
from pyecharts.charts import Line
from pyecharts.commons.utils import JsCode

x_data = ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
y_data = [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200]

# 定义背景渐变色
background_color_js = (
"new echarts.graphic.LinearGradient(0, 0, 0, 1, "
"[{offset: 0, color: '#c86589'}, {offset: 1, color: '#06a7ff'}], false)"
)
# 定义区域填充渐变色
area_color_js = (
"new echarts.graphic.LinearGradient(0, 0, 0, 1, "
"[{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false)"
)

c = (
# 初始化图表，并设置背景渐变色
Line(init_opts=opts.InitOpts(bg_color=JsCode(background_color_js)))
.add_xaxis(xaxis_data=x_data)
.add_yaxis(
series_name="注册总量",
y_axis=y_data,
is_smooth=True, # 平滑折线
is_symbol_show=True, # 显示标记点
symbol="circle", # 标记点形状为圆形
symbol_size=6, # 标记点大小
linestyle_opts=opts.LineStyleOpts(color="#fff"), # 线条颜色为白色
label_opts=opts.LabelOpts(is_show=True, position="top", color="white"), # 显示标签，位于顶部，白色
itemstyle_opts=opts.ItemStyleOpts(
color="red", border_color="#fff", border_width=3 # 标记点颜色为红色，边框白色，宽度3
),
tooltip_opts=opts.TooltipOpts(is_show=False), # 不显示提示框
areastyle_opts=opts.AreaStyleOpts(color=JsCode(area_color_js), opacity=1), # 区域填充渐变
)
.set_global_opts(
title_opts=opts.TitleOpts(
title="OCTOBER 2015",
pos_bottom="5%",
pos_left="center",
title_textstyle_opts=opts.TextStyleOpts(color="#fff", font_size=16),
),
xaxis_opts=opts.AxisOpts(
type_="category",
boundary_gap=False,
axislabel_opts=opts.LabelOpts(margin=30, color="#ffffff63"), # 坐标轴标签颜色和边距
axisline_opts=opts.AxisLineOpts(is_show=False), # 不显示坐标轴线
axistick_opts=opts.AxisTickOpts(
is_show=True,
length=25,
linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"), # 刻度线颜色
),
splitline_opts=opts.SplitLineOpts(
is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f") # 分割线颜色
),
),
yaxis_opts=opts.AxisOpts(
type_="value",
position="right", # Y轴位于右侧
axislabel_opts=opts.LabelOpts(margin=20, color="#ffffff63"),
axisline_opts=opts.AxisLineOpts(
linestyle_opts=opts.LineStyleOpts(width=2, color="#fff") # Y轴线颜色和宽度
),
axistick_opts=opts.AxisTickOpts(
is_show=True,
length=15,
linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),
),
splitline_opts=opts.SplitLineOpts(
is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")
),
),
legend_opts=opts.LegendOpts(is_show=False), # 不显示图例
)
#.render("line_color_with_js_func.html")
)
c.render_notebook()

代码解释：

JsCode 用于在Python代码中嵌入JavaScript函数，这里用于定义渐变色
background_color_js 和 area_color_js 分别定义了图表背景和区域填充的渐变色
is_smooth=True 设置折线为平滑曲线
symbol 和 symbol_size 控制标记点的形状和大小
itemstyle_opts 设置标记点的颜色、边框颜色和宽度
areastyle_opts 设置区域填充样式，这里使用了渐变色
xaxis_opts 和 yaxis_opts 详细配置了坐标轴的样式，包括标签、刻度线和分割线
title_opts 设置标题的位置、颜色和大小

应用场景：

渐变背景折线图特别适合以下场景：

数据演示和汇报，需要吸引观众注意力

产品展示中的数据可视化

网站和应用程序中的数据仪表盘

营销材料中的数据展示在这里插入图片描述

注意事项：

渐变色的选择应符合数据的主题和情感，例如增长数据可以使用积极的颜色

确保文字和图表元素与背景有足够的对比度，保证可读性

过度使用渐变色可能会分散对数据本身的注意力，应适度使用

可以通过调整渐变的颜色和偏移量来创建不同的视觉效果

实际应用中需要替换示例代码中的数据为真实数据

图表2：平滑折线图——数据趋势的流畅展示

平滑折线图通过曲线拟合数据点，使折线更加平滑流畅，适合展示趋势变化较为平缓的数据。这种图表能够减少数据波动带来的视觉干扰，更清晰地呈现数据的整体趋势。

import pyecharts.options as opts
from pyecharts.charts import Line

"""
Gallery 使用 pyecharts 1.1.0
参考地址: `https://echarts.apache.org/examples/editor.html?c=line-smooth`

目前无法实现的功能:

暂无
"""

x_data = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
y_data = [820, 932, 901, 934, 1290, 1330, 1320]

(
Line()
.set_global_opts(
tooltip_opts=opts.TooltipOpts(is_show=False),
xaxis_opts=opts.AxisOpts(type_="category"),
yaxis_opts=opts.AxisOpts(
type_="value",
axistick_opts=opts.AxisTickOpts(is_show=True),
splitline_opts=opts.SplitLineOpts(is_show=True),
),
)
.add_xaxis(xaxis_data=x_data)
.add_yaxis(
series_name="",
y_axis=y_data,
symbol="emptyCircle",
is_symbol_show=True,
is_smooth=True,
label_opts=opts.LabelOpts(is_show=False),
)
#.render("smoothed_line_chart.html")
.render_notebook()
)

代码解释：

is_smooth=True 是实现平滑折线的关键参数，它会使折线图的线条变得平滑流畅
symbol="emptyCircle" 设置标记点为空圆圈，增加图表的美观度
is_symbol_show=True 显示标记点，帮助读者更清晰地识别数据点
tooltip_opts=opts.TooltipOpts(is_show=False) 关闭提示框，简化图表
splitline_opts=opts.SplitLineOpts(is_show=True) 显示分割线，提高数据的可读性
label_opts=opts.LabelOpts(is_show=False) 关闭标签显示，避免图表过于拥挤

应用场景：

平滑折线图特别适合以下场景：

展示长期趋势数据，如股票价格的长期走势、气温的季节变化等

当数据点较多且波动较大时，平滑折线可以减少视觉干扰

需要呈现数据整体趋势而非具体数据点时

制作更具美感的数据可视化报告在这里插入图片描述

注意事项：

平滑折线图会一定程度上改变原始数据的形状，可能会掩盖一些细节波动

对于需要精确展示每个数据点的场景，不建议使用平滑折线

可以通过调整线条颜色和粗细来增强图表的可读性

结合使用标记点可以更好地展示具体数据值

实际应用中可以根据需要添加标题、图例等元素

图表3：自定义标记点折线图——突出显示关键数据

自定义标记点折线图允许我们在图表中特定位置添加标记点，用于突出显示重要的数据点或事件。这种图表特别适合强调关键数据，使读者能够快速捕捉到重要信息。

import pyecharts.options as opts
from pyecharts.charts import Line
from pyecharts.faker import Faker

x, y = Faker.choose(), Faker.values()
c = (
Line()
.add_xaxis(x)
.add_yaxis(
"商家A",
y,
markpoint_opts=opts.MarkPointOpts(
data=[opts.MarkPointItem(name="自定义标记点", coord=[x[2], y[2]], value=y[2])]
),
)
.set_global_opts(title_opts=opts.TitleOpts(title="Line-MarkPoint（自定义）"))
#.render("line_markpoint_custom.html")
)
c.render_notebook()

代码解释：

Faker.choose() 和 Faker.values() 用于生成测试数据
markpoint_opts 参数用于配置标记点
MarkPointItem 定义了一个标记点，其中：
- name 是标记点的名称
- coord 是标记点的坐标，这里使用了[x[2], y[2]]指定第三个数据点
- value 是标记点的值，这里使用了y[2]
set_global_opts 设置了图表标题

应用场景：

自定义标记点折线图特别适合以下场景：

突出显示时间序列中的重要事件或数据点

标记业务目标达成点，如销售目标、用户增长目标等

强调异常值或峰值数据

在演示和汇报中引导观众关注关键信息在这里插入图片描述

注意事项：

标记点不宜过多，否则会使图表过于拥挤，影响可读性

可以通过symbol和symbol_size参数自定义标记点的形状和大小

可以通过itemstyle_opts参数设置标记点的样式

实际应用中，应根据真实数据调整标记点的位置和值

可以同时添加多个标记点，只需在data列表中添加多个MarkPointItem对象

图表4：分段颜色折线图与峰值标记——用电量分布分析

分段颜色折线图通过不同颜色区分数据的不同阶段，结合标记区域可以更直观地展示数据的高峰期和低谷期。这种图表特别适合分析时间序列数据中的模式和异常情况。

import pyecharts.options as opts
from pyecharts.charts import Line

"""
Gallery 使用 pyecharts 1.1.0
参考地址: `https://echarts.apache.org/examples/editor.html?c=line-sections`

目前无法实现的功能:

1、visualMap 暂时无法设置隐藏
"""

x_data = [
"00:00",
"01:15",
"02:30",
"03:45",
"05:00",
"06:15",
"07:30",
"08:45",
"10:00",
"11:15",
"12:30",
"13:45",
"15:00",
"16:15",
"17:30",
"18:45",
"20:00",
"21:15",
"22:30",
"23:45",
]
y_data = [
300,
280,
250,
260,
270,
300,
550,
500,
400,
390,
380,
390,
400,
500,
600,
750,
800,
700,
600,
400,
]

(
Line()
.add_xaxis(xaxis_data=x_data)
.add_yaxis(
series_name="用电量",
y_axis=y_data,
is_smooth=True,
label_opts=opts.LabelOpts(is_show=False),
linestyle_opts=opts.LineStyleOpts(width=2),
)
.set_global_opts(
title_opts=opts.TitleOpts(title="一天用电量分布", subtitle="纯属虚构"),
tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),
xaxis_opts=opts.AxisOpts(boundary_gap=False),
yaxis_opts=opts.AxisOpts(
axislabel_opts=opts.LabelOpts(formatter="{value} W"),
splitline_opts=opts.SplitLineOpts(is_show=True),
),
visualmap_opts=opts.VisualMapOpts(
is_piecewise=True,
dimension=0,
pieces=[
{"lte": 6, "color": "green"},
{"gt": 6, "lte": 8, "color": "red"},
{"gt": 8, "lte": 14, "color": "green"},
{"gt": 14, "lte": 17, "color": "red"},
{"gt": 17, "color": "green"},
],
),
)
.set_series_opts(
markarea_opts=opts.MarkAreaOpts(
data=[
opts.MarkAreaItem(name="早高峰", x=("07:30", "10:00")),
opts.MarkAreaItem(name="晚高峰", x=("17:30", "21:15")),
]
)
)
#.render("distribution_of_electricity.html")
.render_notebook()
)

代码解释：

is_smooth=True 设置折线为平滑曲线，使图表更加流畅美观
visualmap_opts 配置了分段颜色映射，根据x轴索引值将折线分为不同颜色段：
- 索引≤6（对应00:00-07:30）：绿色
- 6<索引≤8（对应08:45-10:00）：红色（早高峰）
- 8<索引≤14（对应11:15-16:15）：绿色
- 14<索引≤17（对应17:30-20:00）：红色（晚高峰）
- 索引>17（对应21:15-23:45）：绿色
markarea_opts 标记了两个高峰期区域：
- 早高峰：07:30-10:00
- 晚高峰：17:30-21:15
tooltip_opts 设置提示框触发方式为坐标轴，并将坐标轴指示器类型设置为十字交叉线
boundary_gap=False 设置x轴不保留边距，使折线图更加紧凑
splitline_opts=opts.SplitLineOpts(is_show=True) 显示y轴分割线，提高数据可读性

应用场景：

分段颜色折线图特别适合以下场景：

电力、水资源等公共事业的用量分布分析

交通流量监测与高峰期识别

网站访问量或APP使用时长的时段分析

生产线设备运行状态监控

环境监测数据的时段变化分析在这里插入图片描述

注意事项：

颜色分段的设置应根据实际业务需求进行调整，确保颜色区分度足够

标记区域不宜过多，以免图表过于复杂影响可读性

可以通过调整visualmap_opts中的pieces参数来定义不同的分段规则

实际应用中，建议根据真实数据的特点调整平滑度和线条样式

对于长时间序列数据，可以考虑使用dataZoom组件实现数据缩放功能

图表5：高级渐变背景折线图与Grid布局——专业数据展示

高级渐变背景折线图结合了Grid布局组件，可以更精确地控制图表在画布中的位置，同时通过精心设计的渐变色和标签样式，打造出专业级的数据可视化效果。这种图表特别适合用于企业报表、数据分析平台和专业演示。

import pyecharts.options as opts
from pyecharts.charts import Line, Grid
from pyecharts.commons.utils import JsCode

"""
参考地址: `https://gallery.echartsjs.com/editor.html?c=xEyDk1hwBx`
"""

x_data = ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
y_data = [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200]

background_color_js = (
"new echarts.graphic.LinearGradient(0, 0, 0, 1, "
"[{offset: 0, color: '#c86589'}, {offset: 1, color: '#06a7ff'}], false)"
)
area_color_js = (
"new echarts.graphic.LinearGradient(0, 0, 0, 1, "
"[{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false)"
)

c = (
Line(init_opts=opts.InitOpts(bg_color=JsCode(background_color_js)))
.add_xaxis(xaxis_data=x_data)
.add_yaxis(
series_name="注册总量",
y_axis=y_data,
is_smooth=True,
is_symbol_show=True,
symbol="circle",
symbol_size=6,
linestyle_opts=opts.LineStyleOpts(color="#fff"),
label_opts=opts.LabelOpts(is_show=True, position="top", color="white"),
itemstyle_opts=opts.ItemStyleOpts(
color="red", border_color="#fff", border_width=3
),
tooltip_opts=opts.TooltipOpts(is_show=False),
areastyle_opts=opts.AreaStyleOpts(color=JsCode(area_color_js), opacity=1),
)
.set_global_opts(
title_opts=opts.TitleOpts(
title="OCTOBER 2015",
pos_bottom="5%",
pos_left="center",
title_textstyle_opts=opts.TextStyleOpts(color="#fff", font_size=16),
),
xaxis_opts=opts.AxisOpts(
type_="category",
boundary_gap=False,
axislabel_opts=opts.LabelOpts(margin=30, color="#ffffff63"),
axisline_opts=opts.AxisLineOpts(is_show=False),
axistick_opts=opts.AxisTickOpts(
is_show=True,
length=25,
linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),
),
splitline_opts=opts.SplitLineOpts(
is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")
),
),
yaxis_opts=opts.AxisOpts(
type_="value",
position="right",
axislabel_opts=opts.LabelOpts(margin=20, color="#ffffff63"),
axisline_opts=opts.AxisLineOpts(
linestyle_opts=opts.LineStyleOpts(width=2, color="#fff")
),
axistick_opts=opts.AxisTickOpts(
is_show=True,
length=15,
linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),
),
splitline_opts=opts.SplitLineOpts(
is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")
),
),
legend_opts=opts.LegendOpts(is_show=False),
)
)

(
Grid()
.add(
c,
grid_opts=opts.GridOpts(
pos_top="20%",
pos_left="10%",
pos_right="10%",
pos_bottom="15%",
is_contain_label=True,
),
)
#.render("beautiful_line_chart.html")
.render_notebook()
)

代码解释：

与图表1相比，本图表增加了Grid组件的使用，通过grid_opts精确控制图表在画布中的位置
pos_top、pos_left、pos_right、pos_bottom参数设置图表与画布边缘的距离
is_contain_label=True确保坐标轴标签被包含在Grid区域内，避免标签被截断
背景渐变色和区域填充渐变色使用JsCode定义，与图表1类似
is_smooth=True设置平滑折线，symbol和symbol_size定义标记点样式
label_opts设置数据标签显示在顶部，颜色为白色，提高可读性
axisline_opts、axistick_opts和splitline_opts详细配置了坐标轴样式，营造出专业的视觉效果

应用场景：

高级渐变背景折线图特别适合以下场景：

企业季度/年度数据报告

数据分析平台的仪表盘

金融数据可视化

产品发布会演示材料

专业学术报告中的数据展示在这里插入图片描述

注意事项：

Grid布局参数需要根据实际数据和展示需求进行调整，确保图表元素布局合理

渐变色的选择应符合品牌调性和数据主题，避免过于鲜艳的颜色组合

确保文字和图表元素与背景有足够的对比度，特别是在使用深色背景时

对于复杂图表，建议使用is_contain_label=True以避免标签被截断

实际应用中，可以结合dataZoom、tooltip等组件进一步增强交互体验

在网页中嵌入时，注意调整容器大小以适应Grid布局

总结

在本文中，我们详细介绍了五种高级折线图类型，从视觉效果到功能应用，全方位展示了pyecharts的强大 capabilities：

渐变背景折线图：通过炫酷的渐变色背景和区域填充，有效吸引观众注意力，适合数据演示和汇报。

平滑折线图：通过曲线拟合减少数据波动视觉干扰，清晰呈现整体趋势，适合展示长期趋势数据。

自定义标记点折线图：允许在特定位置添加标记点，突出显示关键数据，适合强调异常值或业务目标达成点。

分段颜色折线图与峰值标记：通过不同颜色区分数据阶段并标记高峰期，特别适合用电量、交通流量等时段分析。

高级渐变背景折线图与Grid布局：结合Grid组件精确控制图表位置，打造专业级数据可视化效果，适合企业报表和数据分析平台。

每种图表都有其独特的应用场景和注意事项，掌握这些技巧可以帮助您创建更加丰富、专业的数据可视化作品。

如果您想了解更多关于pyecharts的使用技巧，请关注我们的系列文章。感谢您的阅读！

每日五个pyecharts可视化图表-line：从入门到精通（4）

目录

图表1：渐变背景折线图——炫酷视觉效果的实现

代码解释：

应用场景：

注意事项：

图表2：平滑折线图——数据趋势的流畅展示

代码解释：

应用场景：

注意事项：

图表3：自定义标记点折线图——突出显示关键数据

代码解释：

应用场景：

注意事项：

图表4：分段颜色折线图与峰值标记——用电量分布分析

代码解释：

应用场景：

注意事项：

图表5：高级渐变背景折线图与Grid布局——专业数据展示

代码解释：

应用场景：

注意事项：

总结

相关推荐

评论抢沙发

评论前必须登录！

热门标签

置顶推荐

热门文章

最新文章

目录

图表1：渐变背景折线图——炫酷视觉效果的实现

代码解释：

应用场景：

注意事项：

图表2：平滑折线图——数据趋势的流畅展示

代码解释：

应用场景：

注意事项：

图表3：自定义标记点折线图——突出显示关键数据

代码解释：

应用场景：

注意事项：

图表4：分段颜色折线图与峰值标记——用电量分布分析

代码解释：

应用场景：

注意事项：

图表5：高级渐变背景折线图与Grid布局——专业数据展示

代码解释：

应用场景：

注意事项：

总结

相关推荐

评论 抢沙发

评论前必须登录！

热门标签

置顶推荐

热门文章

最新文章

评论抢沙发