pyecharts-动态可视化(6)折线图的多页面转换/实现渐变色/面积图/鼠标悬浮信息/堆叠

最新推荐文章于 2025-03-10 21:24:52 发布

vv_eve

最新推荐文章于 2025-03-10 21:24:52 发布

阅读量8.3k

点赞数 14

分类专栏： pyecharts 文章标签：数据可视化 python

本文链接：https://blog.youkuaiyun.com/vv_eve/article/details/107874753

版权

pyecharts 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍折线图的各种高级应用技巧，包括基础版、面积图、对数轴示例、堆叠区域图、渐变色设置等10种场景，并提供代码示例，助您掌握折线图的全方位绘制技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

折线图基本版（1 of 10）

在这里插入图片描述

折线图

Line()：调用折线图函数

add_yaxis设置

.add_yaxis("商家A", Faker.values())：系列名称和系列数据

import pyecharts.options as opts
from pyecharts.charts import Line
from pyecharts.faker import Faker
c = (
    Line()
    .add_xaxis(Faker.choose())
    .add_yaxis("商家A", Faker.values())
    .add_yaxis("商家B", Faker.values())
    .set_global_opts(title_opts=opts.TitleOpts(title="Line-基本示例"))
    .render("line_base.html")
)

折线图（2 of 10）：标注+多页面转换

在这里插入图片描述

背景设置 Line

Line(init_opts=opts.InitOpts(theme="dark",width="800px", height="450px"))：黑色背景

yaxis 标注点/线

opts.MarkPointItem(name="最大值",type_="max")：标注点
opts.MarkLineItem(type_="average", name="平均值")]：标注线

坐标轴配置.set_global_opts

tooltip_opts=opts.TooltipOpts(trigger="axis"),：提示框组件配置项
xaxis_opts=opts.AxisOpts(type_="category", boundary_gap=False),：扩展 X 坐标轴配置项

import pyecharts.options as opts
from pyecharts.charts import Line
week_name_list = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
high_temperature = [11, 11, 15, 13, 12, 13, 10]
low_temperature = [1, -2, 2, 5, 3, 2, 0]
(
    Line(init_opts=opts.InitOpts(theme="dark",width="800px", height="450px"))
    .add_xaxis(xaxis_data=week_name_list)
    .add_yaxis(
        series_name="最高气温",
        y_axis=high_temperature,
        markpoint_opts=opts.MarkPointOpts(
            data=[
                opts.MarkPointItem(name="最大值",type_="max"),
                opts.MarkPointItem(name="最小值",type_="min"),
            ]
        ),
        markline_opts=opts.MarkLineOpts(
            data=[opts.MarkLineItem(type_="average", name="平均值")]
        ),
    )
    .add_yaxis(
        series_name="最低气温",
        y_axis=low_temperature,
        ),
        markline_opts=opts.MarkLineOpts(
            data=[
                opts.MarkLineItem(type_="average", name="平均值"),
                opts.MarkLineItem(symbol="none", x="90%", y="max"),
                opts.MarkLineItem(symbol="circle", type_="max", name="最高点"),
            ]
        ),
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(title="未来一周气温变化", subtitle="纯属虚构"),
        tooltip_opts=opts.TooltipOpts(trigger="axis"),
        toolbox_opts=opts.ToolboxOpts(is_show=True),
        xaxis_opts=opts.AxisOpts(type_="category", boundary_gap=False),
    )
    .render("temperature_change_line_chart.html")
)

折线图(3 of 10)：面积图

在这里插入图片描述

平滑曲线 .add_yaxis

is_smooth: bool = False, ：是否平滑曲线

透明度设置 .set_series_opts

areastyle_opts=opts.AreaStyleOpts(opacity=0.5),：填充区域配置项, opacity可以设置在[0,1]，0的话就直接是一个折线图，透明度的概念，就是设置数值越大透明度越低。
label_opts=opts.LabelOpts(is_show=False)：要不要标记数值。

刻度线和标签对齐.set_global_opts

axistick_opts=opts.AxisTickOpts(is_align_with_label=False：只有在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐，感觉面积图还是用False好看
is_scale=False,：
①只在数值轴中（type: ‘value’）有效。
②是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
③在设置 min 和 max 之后该配置项无效。

import pyecharts.options as opts
from pyecharts.charts import Line
from pyecharts.faker import Faker
c = (
    Line()
    .add_xaxis(Faker.choose())
    .add_yaxis("商家A", Faker.values(), is_smooth=True)
    .add_yaxis("商家B", Faker.values(), is_smooth=True)
    .set_series_opts(
        areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
        label_opts=opts.LabelOpts(is_show=False),
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Line-面积图（紧贴 Y 轴）"),
        xaxis_opts=opts.AxisOpts(
            axistick_opts=opts.AxisTickOpts(is_align_with_label=False),
            is_scale=False,
            boundary_gap=False,
        ),
    )
    .render("line_areastyle_boundary_gap.html")
)

折线图(4 of 10) 网格线+缺省处理+log函数

在这里插入图片描述

缺省

.add_yaxis(is_connect_nones=True,)：相当于相邻两点直接相连

log函数opts.AxisOpts(type_=“log”,)

yaxis_opts=opts.AxisOpts(type_="log",)：选择type_=“log”

网格线opts.SplitLineOpts

splitline_opts=opts.SplitLineOpts(is_show=True),

import pyecharts.options as opts
from pyecharts.charts import Line
y_data = [1, 2, 4, 8, 16, 32, 64, 128, 256]
y_data[5]=None
c = (
    Line()
    .add_xaxis(xaxis_data=["一", "二", "三", "四", "五", "六", "七", "八", "九"])
    .add_yaxis(
        "2 的指数",
        y_axis=y_data,
        linestyle_opts=opts.LineStyleOpts(width=2),
        is_connect_nones=True,
    )
    .add_yaxis(
        "3 的指数",
        y_axis=[1, 3, 9, 27, 81, 247, 741, 2223, 6669],
        linestyle_opts=opts.LineStyleOpts(width=2),
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Line-对数轴示例"),
        xaxis_opts=opts.AxisOpts(name="x"),
        yaxis_opts=opts.AxisOpts(
            type_="log",
            name="y",
            splitline_opts=opts.SplitLineOpts(is_show=True),
            is_scale=True,
        ),
    )
    .render("line_yaxis_log.html")
)

折线图（5 of 10）

代码链接

在这里插入图片描述

折线图（6 of 10）

代码链接
在这里插入图片描述

折线图（7 of 10）

在这里插入图片描述

鼠标悬浮信息 js_formatter

formatter 一般用于格式化鼠标悬浮时间的信息
js_formatter = """function (params) {console.log(params);return '降水量 ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');}"""

坐标轴刻度线配置 .extend_axis(

type_="category"：type为category这个类型时,表示的是离散的数据,必须通过 data 设置类目数据
axisline_opts：坐标轴刻度线配置项
axisline_opts=opts.AxisLineOpts(is_on_zero=False,linestyle_opts=opts.LineStyleOpts(color="#6e9ef1"))

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

js_formatter = """function (params) {
        console.log(params);
        return '降水量  ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
    }"""

(
    Line(init_opts=opts.InitOpts(width="1000px", height="550px"))
    .add_xaxis(
        xaxis_data=["2016-1","2016-2","2016-3","2016-4","2016-5","2016-6","2016-7","2016-8","2016-9","2016-10","2016-11","2016-12",])
    .extend_axis(
        xaxis_data=["2015-1","2015-2","2015-3","2015-4","2015-5","2015-6","2015-7","2015-8","2015-9","2015-10","2015-11","2015-12",],
        xaxis=opts.AxisOpts(
            type_="category",
            axistick_opts=opts.AxisTickOpts(is_align_with_label=True),
            axisline_opts=opts.AxisLineOpts(
                is_on_zero=False, linestyle_opts=opts.LineStyleOpts(color="#6e9ef1")
            ),
            axispointer_opts=opts.AxisPointerOpts(
                is_show=True, label=opts.LabelOpts(formatter=JsCode(js_formatter))
            ),
        ),
    )
    .add_yaxis(
        series_name="2015 降水量",
        is_smooth=True,
        symbol="emptyCircle",
        is_symbol_show=False,
        # xaxis_index=1,
        color="#d14a61",
        y_axis=[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
        label_opts=opts.LabelOpts(is_show=False),
        linestyle_opts=opts.LineStyleOpts(width=2),
    )
    .add_yaxis(
        series_name="2016 降水量",
        is_smooth=True,
        symbol="emptyCircle",
        is_symbol_show=False,
        color="#6e9ef1",
        y_axis=[3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
        label_opts=opts.LabelOpts(is_show=False),
        linestyle_opts=opts.LineStyleOpts(width=2),
    )
    .set_global_opts(
        legend_opts=opts.LegendOpts(),
        tooltip_opts=opts.TooltipOpts(trigger="none", axis_pointer_type="cross"),
        xaxis_opts=opts.AxisOpts(
            type_="category",
            axistick_opts=opts.AxisTickOpts(is_align_with_label=True),
            axisline_opts=opts.AxisLineOpts(
                is_on_zero=False, linestyle_opts=opts.LineStyleOpts(color="#d14a61")
            ),
            axispointer_opts=opts.AxisPointerOpts(
                is_show=True, label=opts.LabelOpts(formatter=JsCode(js_formatter))
            ),
        ),
        yaxis_opts=opts.AxisOpts(
            type_="value",
            splitline_opts=opts.SplitLineOpts(
                is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1)
            ),
        ),
    )
    .render("multiple_x_axes.html")
)

折线图（堆叠）（8 of 10）

在这里插入图片描述

x_data = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
y_data = [820, 932, 901, 934, 1290, 1330, 1320]

(
    Line()
    .add_xaxis(xaxis_data=x_data)
    .add_yaxis(
        series_name="邮件营销",
        stack="总量",
        y_axis=[120, 132, 101, 134, 90, 230, 210],
        areastyle_opts=opts.AreaStyleOpts(opacity=0.5),# 透明度设置的问题
        label_opts=opts.LabelOpts(is_show=False), # 数字显示与否
    )
    .add_yaxis(
        series_name="联盟广告",
        stack="总量",
        y_axis=[220, 182, 191, 234, 290, 330, 310],
        areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
        label_opts=opts.LabelOpts(is_show=False),
    )
    .add_yaxis(
        series_name="视频广告",
        stack="总量",
        y_axis=[150, 232, 201, 154, 190, 330, 410],
        areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
        label_opts=opts.LabelOpts(is_show=False),
    )
    .add_yaxis(
        series_name="直接访问",
        stack="总量",
        y_axis=[320, 332, 301, 334, 390, 330, 320],
        areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
        label_opts=opts.LabelOpts(is_show=False),
    )
    .add_yaxis(
        series_name="搜索引擎",
        stack="总量",
        y_axis=[820, 932, 901, 934, 1290, 1330, 1320],
        areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
        label_opts=opts.LabelOpts(is_show=True, position="top"),
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(title="堆叠区域图"),
        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),
        yaxis_opts=opts.AxisOpts(
            type_="value",
            axistick_opts=opts.AxisTickOpts(is_show=True),
            splitline_opts=opts.SplitLineOpts(is_show=True),
        ),
        xaxis_opts=opts.AxisOpts(type_="category", boundary_gap=False),
    )
    .render("stacked_area_chart.html")
)

折线图（9 of 10）

在这里插入图片描述

实现渐变色设置

背景：echarts内置的渐变色生成器叫 echarts.graphic.LinearGradient
①在pyecharts里，"new echarts.graphic.LinearGradient(0, 0, 0, 1, " 加了new，
4个参数用于配置渐变色的起止位置，这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
② "[{offset: 0, color: '#c86589'}, {offset: 1, color: '#06a7ff'}], false)"
数组，用于配置颜色的渐变过程。每一项为一个对象，包含offset和color两个参数，offset的范围是0 ~ 1，表示位置
③area_color_js设置的是折线面积颜色，就是图示里白白的部分；
background_color_js设置的是背景颜色

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: '#06a7ff'}, {offset: 1, color: 'black'}], false)"
)
area_color_js = (
    "new echarts.graphic.LinearGradient(0, 0, 0, 1, "
    "[{offset: 0, color: 'white'}, {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 2020",
            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),
    )
    .render("line_color_with_js_func.html")
)

折线图（10 of 10）

visualmap_opts

is_piecewise=True, 选择False分类会变成连续型的时间，True对应的是现在左下角的那个选择图例；
pieces=[ {"lte": 6, "color": "green"},]自主调整左下角那个时间选择区间及其颜色；

分割区域 .set_series_opts(

markarea_opts=opts.MarkAreaOpts和matplotlib有点像，注意所选时间是x_data中出现的即可。

import pyecharts.options as opts
from pyecharts.charts import Line
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(init_opts=opts.InitOpts(width="1200px", height="600px"))#图大小
    .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, #选择False分类会变成连续型的时间 
            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=[ #要注意要注意分号的中英文，时间的选择是x_data里有的
                opts.MarkAreaItem(name="早高峰", x=("02:30", "10:00")), opts.MarkAreaItem(name="晚高峰", x=("17:30", "21:15")),]
        )
    )
    .render("distribution_of_electricity.html")
)

上一关 >> 关系图/社会网络/涟漪特效：
https://blog.youkuaiyun.com/vv_eve/article/details/107836157
下一节 >> 水球图的绘制：
https://blog.youkuaiyun.com/vv_eve/article/details/107949799