基于Pyecharts的可视化平台设计

在数据分析和可视化领域，PyEcharts是一个功能强大且易于使用的Python可视化库。它提供了各种图表类型和丰富的交互功能，使我们能够以直观和有吸引力的方式展示数据。在本文中，我们将探讨如何使用Pyecharts创建地图、折线图、漏斗图和柱状图。（特别说明一下，为了使得可视化的地图更加美观的我在代码里面直接插入了图片，还有数据的宏定义，直接运行代码可能会导致出错）

当然，这里我只是提供了一个可执行的代码模板，这里以疫情数据可视化为例子，将标题的数据更改一下可视化的内容就更加广泛了。

下面来看看效果图：

3D地图可视化

地图可视化是一种强大的方式，可以将数据与地理位置关联起来。Pyecharts提供了多种地图类型，包括全球地图、中国地图以及各个省市的地图。下面是一个简单的示例，展示了如何使用Pyecharts创建一个中国地图，并标注各个城市的数据。

def map_3d() -> Map3D():
    c = (
        Map3D(opts.InitOpts(width="1100px", height="560px"))
        .add_schema(
            itemstyle_opts=opts.ItemStyleOpts(
                color="rgb(5,101,123)",
                opacity=1,
                border_width=0.8,
                border_color="rgb(62,215,213)",
            ),
            map3d_label=opts.Map3DLabelOpts(
                is_show=False,
                formatter=JsCode("function(data){return data.name + " " + data.value[2];}"),
            ),
            emphasis_label_opts=opts.LabelOpts(
                is_show=False,
                color="#fff",
                font_size=10,
                background_color="rgba(0,23,11,0)",
            ),
            light_opts=opts.Map3DLightOpts(
                main_color="#fff",
                main_intensity=1.2,
                main_shadow_quality="high",
                is_main_shadow=False,
                main_beta=10,
                ambient_intensity=0.3,
            ),
        )
        .add(
            series_name="标题",#这个里可以自定义
            data_pair=example_data,
            type_=ChartType.BAR3D,
            bar_size=1,
            shading="lambert",
            label_opts=opts.LabelOpts(

                is_show=False,
                formatter=JsCode("function(data){return data.name + ' ' + data.value[2];}"),
            ),
        )
        .set_global_opts(
            title_opts=opts.TitleOpts(title=""),
            legend_opts=opts.LegendOpts(
                pos_left="center",
                pos_top="5%",
                orient="",  # vertical图例放置的方式
                textstyle_opts=opts.TextStyleOpts(
                    font_size=12,
                    color="white"
                    # font_family="Times New Roman",
                ),
            ),
            graphic_opts=[
                opts.GraphicImage(
                    graphic_item=opts.GraphicItem(
                        id_="logo",  # 设置图形元素的 ID，方便在 JS 中操作
                        right=10,  # 图片距离容器右侧的距离
                        top=1,  # 图片距离容器顶部的距离
                        z=-10,  # 设置层级
                        bounding="raw",  # 设置图片定位的基准点为图片左上角
                        origin=[75, 75],  # 设置图片定位的原点
                    ),
                    graphic_imagestyle_opts=opts.GraphicImageStyleOpts(
                        image="image/000.svg",  # 图片路径
                        width=1060,  # 图片宽度
                        height=550,  # 图片高度
                        opacity=1,  # 图片透明度
                    ),
                )
            ],

        )

    )
    return c

折现图可视化

折线图是一种常见的图表类型，用于显示数据随时间或其他连续变量的变化趋势。Pyecharts提供了创建漂亮折线图的功能。以下示例展示了如何使用Pyecharts创建一个简单的折线图。

# 折线图
def series3() -> Line:
    c = (

        Line(opts.InitOpts(renderer='svg', width="1100px", height="300px"))  # 必须传入初始化参数 renderer 指定导出格式

        .add_xaxis(xaxis_data=va1)
        .add_yaxis(series_name="全国累计感染人数", y_axis=va2,
                   linestyle_opts=opts.LineStyleOpts(width=2),
                   is_smooth=True, is_symbol_show=True, color="red")
        .add_yaxis(series_name="全国累计治愈人数", y_axis=vb2,
                   linestyle_opts=opts.LineStyleOpts(width=2),
                   is_smooth=True, is_symbol_show=True, color="")
        .add_yaxis(series_name="全国累计死亡人数", y_axis=vc2,
                   linestyle_opts=opts.LineStyleOpts(width=2),
                   is_smooth=True, is_symbol_show=True)

        .extend_axis(
            xaxis=opts.AxisOpts(
                axislabel_opts=opts.LabelOpts(formatter="{value}"),
                axisline_opts=opts.AxisLineOpts(is_on_zero=False)
            )
        )

        .extend_axis(
            yaxis=opts.AxisOpts()
        )
        .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
        .set_global_opts(
            # title_opts=opts.TitleOpts(title="bar_fg"),

            _titleopts=opts.TitleOpts(title="", pos_left="20", pos_top="20"),  # 再次设置标题
            legend_opts=opts.LegendOpts(
                pos_left="center",
                pos_top="10%",
                orient="",  # vertical图例放置的方式
                textstyle_opts=opts.TextStyleOpts(
                    font_size=12,
                    color="white"
                    # font_family="Times New Roman",
                ),
            ),
            xaxis_opts=opts.AxisOpts(
                name="",
                name_location="middle",
                name_gap=20,
                # x轴名称的格式配置
                name_textstyle_opts=opts.TextStyleOpts(
                    # font_family="Times New Roman",
                    font_size=14,
                ),
                # 坐标轴刻度配置项
                axistick_opts=opts.AxisTickOpts(
                    # is_show=False, 是否显示
                    # 刻度线是否在内侧
                    is_inside=True,
                ),
                # 坐标轴线的配置
                axisline_opts=opts.AxisLineOpts(
                    linestyle_opts=opts.LineStyleOpts(
                        width=1,
                        color="white",
                    )
                ),

                # 坐标轴标签的配置
                axislabel_opts=opts.LabelOpts(
                    # font_family="Times New Roman",
                    font_size=10,
                    position="bottom",
                    horizontal_align="right"
                ),
            ),
            yaxis_opts=opts.AxisOpts(
                name="",
                name_location="middle",
                name_gap=30,
                name_textstyle_opts=opts.TextStyleOpts(
                    # font_family="Times New Roman",
                    font_size=14,
                    color="white",
                    #  font_weight="bolder",
                ),
                axisline_opts=opts.AxisLineOpts(
                    linestyle_opts=opts.LineStyleOpts(
                        width=1,
                        color="white",
                    )
                ),
                axistick_opts=opts.AxisTickOpts(
                    # is_show=False,  是否显示
                    # 刻度线是否在内侧
                    is_inside=True,
                ),
                splitline_opts=opts.SplitLineOpts(is_show=True),
                axislabel_opts=opts.LabelOpts(
                    formatter="{value} ",
                    font_size=12,
                    # font_family="Times New Roman",
                ),
            ),

            graphic_opts=[
                opts.GraphicImage(
                    graphic_item=opts.GraphicItem(
                        id_="logo",  # 设置图形元素的 ID，方便在 JS 中操作
                        right=-200,  # 图片距离容器右侧的距离
                        top=10,  # 图片距离容器顶部的距离
                        z=-10,  # 设置层级
                        bounding="raw",  # 设置图片定位的基准点为图片左上角
                        origin=[75, 75],  # 设置图片定位的原点
                    ),
                    graphic_imagestyle_opts=opts.GraphicImageStyleOpts(
                        image="image/009.svg",  # 图片路径
                        width=1498,  # 图片宽度
                        height=268,  # 图片高度
                        opacity=1,  # 图片透明度
                    ),
                )
            ],

        )

    )
    return c

漏斗图可视化

漏斗图常用于展示渠道的转化过程，以及不同阶段的数据比例。Pyecharts提供了创建漏斗图的功能。以下示例展示了如何使用Pyecharts创建一个简单的漏斗图。

# 漏斗图
def funnel() -> Funnel:
    c = (
        Funnel(opts.InitOpts(renderer='svg', width="600px", height="300px"))
        .add(
            series_name="",
            data_pair=data,
            gap=2,
            tooltip_opts=opts.TooltipOpts(trigger="item", formatter="{a} <br/>{b} : {c}%"),
            label_opts=opts.LabelOpts(is_show=True, position="inside"),
            itemstyle_opts=opts.ItemStyleOpts(border_color="#fff", border_width=1),
        )
        .set_global_opts(
            title_opts=opts.TitleOpts(title="", subtitle=""),
            legend_opts=opts.LegendOpts(
                pos_left="center",
                pos_top="10%",
                orient="",  # vertical图例放置的方式
                textstyle_opts=opts.TextStyleOpts(
                    font_size=12,
                    color="white"
                    # font_family="Times New Roman",
                ),
            ),
            # 设置图片
            graphic_opts=[
                opts.GraphicImage(
                    graphic_item=opts.GraphicItem(
                        id_="logo",  # 设置图形元素的 ID，方便在 JS 中操作
                        right=10,  # 图片距离容器右侧的距离
                        top=1,  # 图片距离容器顶部的距离
                        z=-10,  # 设置层级
                        bounding="raw",  # 设置图片定位的基准点为图片左上角
                        origin=[75, 75],  # 设置图片定位的原点
                    ),
                    graphic_imagestyle_opts=opts.GraphicImageStyleOpts(
                        image="image/002.png",  # 图片路径
                        width=600,  # 图片宽度
                        height=270,  # 图片高度
                        opacity=1,  # 图片透明度
                    ),
                )
            ],

        )

    )
    return c

柱状图可视化

柱状图是一种常见的图表类型，用于比较不同类别或组的数据。Pyecharts提供了创建柱状图的功能。以下示例展示了如何使用Pyecharts创建一个简单的柱状图。

# 柱状图
def series4() -> Bar:
    c = (
        Bar(opts.InitOpts(width="585px", height="280px", renderer='svg'))  # 注意这里使用了()括号将 Bar 类实例化，可以使代码更简洁易读
        .add_xaxis(["武汉市", "上海市", "北京市", "石家庄", "广州市"])  # 添加 X 轴数据
        .add_yaxis("新增人数", [75, 36, 20, 10, 2], color="")  # 添加 Y 轴数据
        .reversal_axis()
        .set_series_opts(label_opts=opts.LabelOpts(position="right"))

        .set_global_opts(
            title_opts=opts.TitleOpts(
                title="每日新增人数Top5",
                pos_left="20",  # 标题
                pos_top="20",  # 标题与顶部的距离
                title_textstyle_opts=opts.TextStyleOpts(color='white', font_size=14)
            ),
            legend_opts=opts.LegendOpts(
                pos_left="center",
                pos_top="12%",
                orient="horizontal",  # vertical图例放置的方式
                textstyle_opts=opts.TextStyleOpts(
                    font_size=12,
                    color="white"
                    # font_family="Times New Roman",
                ),
            ),
            xaxis_opts=opts.AxisOpts(
                name="",
                name_location="middle",
                name_gap=20,
                # x轴名称的格式配置
                name_textstyle_opts=opts.TextStyleOpts(
                    # font_family="Times New Roman",
                    font_size=14,
                ),
                # 坐标轴刻度配置项
                axistick_opts=opts.AxisTickOpts(
                    # is_show=False, 是否显示
                    # 刻度线是否在内侧
                    is_inside=True,
                ),
                # 坐标轴线的配置
                axisline_opts=opts.AxisLineOpts(
                    linestyle_opts=opts.LineStyleOpts(
                        width=1,
                        color="white",
                    )
                ),

                # 坐标轴标签的配置
                axislabel_opts=opts.LabelOpts(
                    font_size=12,
                    # font_family="Times New Roman",
                ),
            ),
            yaxis_opts=opts.AxisOpts(
                name="",
                name_location="middle",
                name_gap=30,
                name_textstyle_opts=opts.TextStyleOpts(
                    # font_family="Times New Roman",
                    font_size=14,
                    color="white",
                    #  font_weight="bolder",
                ),
                axisline_opts=opts.AxisLineOpts(
                    linestyle_opts=opts.LineStyleOpts(
                        width=1,
                        color="white",
                    )
                ),
                axistick_opts=opts.AxisTickOpts(
                    # is_show=False,  是否显示
                    # 刻度线是否在内侧
                    is_inside=True,
                ),
                axislabel_opts=opts.LabelOpts(
                    font_size=12,
                    # font_family="Times New Roman",
                ),
            ),

            graphic_opts=[
                opts.GraphicImage(
                    graphic_item=opts.GraphicItem(
                        id_="logo",  # 设置图形元素的 ID，方便在 JS 中操作
                        right=20,  # 图片距离容器右侧的距离
                        top=1,  # 图片距离容器顶部的距离
                        z=-10,  # 设置层级
                        bounding="raw",  # 设置图片定位的基准点为图片左上角
                        origin=[75, 75],  # 设置图片定位的原点
                    ),
                    graphic_imagestyle_opts=opts.GraphicImageStyleOpts(
                        image="image/002.png",  # 图片路径
                        width=580,  # 图片宽度
                        height=270,  # 图片高度
                        opacity=1,  # 图片透明度
                    ),
                )
            ],

        )
    )
    return c

南丁格尔玫瑰图可视化

南丁格尔玫瑰图是一种特殊的饼图，它将扇形区域按照半径的比例进行划分，形成一个美丽的玫瑰花瓣状图表。每个扇形区域的角度表示数据的大小，而半径表示另一个维度的数据。在Pyecharts中，我们可以使用Pie类来创建南丁格尔玫瑰图。

首先，我们需要准备数据。数据是一个包含类别和数值的列表，每个元素代表一个扇形区域。例如，我们可以使用以下数据：

# 南丁格尔玫瑰图数据
provinces = ['春季', '夏季', '秋季', '冬季']
num = [51, 44, 33, 60]

接下来，我们创建一个Pie实例，并使用.add()方法添加数据。在添加数据时，我们需要指定半径范围radius，以及使用rosetype="radius"参数将图表设置为南丁格尔玫瑰图。我们还可以通过label_opts参数设置标签的显示方式。

# 南丁格尔玫瑰图
def series5() -> Pie:
    c = (
        Pie(opts.InitOpts(renderer='svg', width="600px", height="300px"))

        .add(
            "",
            [list(z) for z in zip(provinces, num)],
            radius=["30%", "75%"],
            center=["50%", "50%"],
            rosetype="area",

        )

        .set_global_opts(
            legend_opts=opts.LegendOpts(type_='scroll', pos_left="center", pos_top="5%", orient="horizontal",
                                        # vertical图例放置的方式
                                        textstyle_opts=opts.TextStyleOpts(
                                            font_size=12,
                                            color="white"
                                            # font_family="Times New Roman",
                                        ), ),

            title_opts=opts.TitleOpts(title="季节感染人数比例", pos_left="35", pos_top="25",
                                      title_textstyle_opts=opts.TextStyleOpts(color='white', font_size=14)),

            # 设置图片
            graphic_opts=[
                opts.GraphicImage(
                    graphic_item=opts.GraphicItem(
                        id_="logo",  # 设置图形元素的 ID，方便在 JS 中操作
                        right=10,  # 图片距离容器右侧的距离
                        top=1,  # 图片距离容器顶部的距离
                        z=-10,  # 设置层级
                        bounding="raw",  # 设置图片定位的基准点为图片左上角
                        origin=[75, 75],  # 设置图片定位的原点
                    ),
                    graphic_imagestyle_opts=opts.GraphicImageStyleOpts(
                        image="image/002.png",  # 图片路径
                        width=600,  # 图片宽度
                        height=270,  # 图片高度
                        opacity=1,  # 图片透明度
                    ),
                )
            ],
        )

    )
    return c

由于我使用的数据是静态数据，为了让大家可以轻松的运行代码下面是关于图标的数据定义，这里的数据定义与上面图表可视化的内容有联系！这些数据内容不用太过在意，大家可以根据自己的意愿自行更改或者使用API。

# 构建随机生成的省份疫情数据
province_data = []
for i in range(34):
    name = "省份" + str(i)
    value = random.randint(1, 1000)
    province_data.append((name, value))

# 构建随机生成的全国疫情数据
national_data = []
for i in range(1, 8):
    date = "2022-03-0" + str(i)
    value = random.randint(1000, 5000)
    national_data.append((date, value))

example_data = [
    ("黑龙江", [127.9688, 45.368, 100]),
    ("内蒙古", [110.3467, 41.4899, 300]),
    ("吉林", [125.8154, 44.2584, 300]),
    ("辽宁", [123.1238, 42.1216, 300]),
    ("河北", [114.4995, 38.1006, 300]),
    ("天津", [117.4219, 39.4189, 300]),
    ("山西", [112.3352, 37.9413, 300]),
    ("陕西", [109.1162, 34.2004, 300]),
    ("甘肃", [103.5901, 36.3043, 300]),
    ("宁夏", [106.3586, 38.1775, 300]),
    ("青海", [101.4038, 36.8207, 300]),
    ("新疆", [87.9236, 43.5883, 300]),
    ("西藏", [91.11, 29.97, 300]),
    ("四川", [103.9526, 30.7617, 300]),
    ("重庆", [108.384366, 30.439702, 300]),
    ("山东", [117.1582, 36.8701, 300]),
    ("河南", [113.4668, 34.6234, 300]),
    ("江苏", [118.8062, 31.9208, 300]),
    ("安徽", [117.29, 32.0581, 300]),
    ("湖北", [114.3896, 30.6628, 300]),
    ("浙江", [119.5313, 29.8773, 300]),
    ("福建", [119.4543, 25.9222, 300]),
    ("江西", [116.0046, 28.6633, 300]),
    ("湖南", [113.0823, 28.2568, 300]),
    ("贵州", [106.6992, 26.7682, 300]),
    ("广西", [108.479, 23.1152, 300]),
    ("海南", [110.3893, 19.8516, 300]),
    ("上海", [121.4648, 31.2891, 1300]),
]
# 折线图数据
va1 = [
    '1.23', '1.24', '1.25', '1.26', '1.27', '1.28', '1.29', '1.30', '1.31', '2.1', '2.2', '2.3', '2.4', '2.5', '2.6',
    '2.7', '2.8', '2.9', '2.10', '2.11', '2.12', '2.13', '2.14', '2.15', '2.16', '2.17', '2.18', '2.19', '2.20', '2.21',
    '2.22',
]
va2 = [
    495, 572, 618, 698, 1590, 1905, 2261, 2639, 3215, 4109, 5142, 6384, 8351, 10117, 11618, 13603, 14982, 16902, 18454,
    19558, 32994,
    35991, 37914, 39462, 41152, 42752, 44412, 45027, 45346, 45660, 46259,
]
vb1 = [
    '1.23', '1.24', '1.25', '1.26', '1.27', '1.28', '1.29', '1.30', '1.31', '2.1', '2.2', '2.3',
    '2.4', '2.5', '2.6', '2.7', '2.8', '2.9', '2.10', '2.11', '2.12', '2.13', '2.14', '2.15', '2.16',
    '2.17', '2.18', '2.19', '2.20', '2.21', '2.22',
]
vb2 = [
    31, 32, 40, 42, 42, 75, 82, 103, 139, 171, 224, 303, 368, 431, 534, 698, 877, 1044, 1206,
    1377, 1915, 2016, 2502, 2915, 3458, 4219, 4895, 5448, 6214, 7206, 8171]

vc1 = [
    '1.23', '1.24', '1.25', '1.26', '1.27', '1.28', '1.29', '1.30', '1.31', '2.1', '2.2', '2.3',
    '2.4', '2.5', '2.6', '2.7', '2.8', '2.9', '2.10', '2.11', '2.12', '2.13', '2.14', '2.15',
    '2.16', '2.17', '2.18', '2.19', '2.20', '2.21', '2.22',
]
vc2 = [
    23, 38, 45, 63, 85, 104, 129, 159, 192, 224, 265, 313, 362, 414, 478, 545, 608, 681, 748, 820, 1036,
    1016, 1123, 1233, 1309, 1381, 1497, 1585, 1684, 1774, 1856,
]
# 南丁格尔玫瑰图数据
provinces = ['春季', '夏季', '秋季', '冬季']
num = [51, 44, 33, 60]
# 漏斗图数据
x_data = ["累计感染人数百分比", "累计治愈人数百分比", "未感染人数百分比"]
y_data = [30, 20, 50]
data = [[x_data[i], y_data[i]] for i in range(len(x_data))]

下面是最重要的一步了！！！那么如何将这些可视化图表有规则的拼接在一起呢？？？

这里我使用的是page()函数，当然还有很多其他方法，这里只是方法之一，也是最容易上手的方法！

# 构建网格布局，将地图、折线图和柱状图合并在
page = (
    Page(layout=Page.DraggablePageLayout)
    .add(
        image_b(),
        image_a(),
        map_3d(),
        funnel(),
        series3(),
        series4(),
        series5(),
        # table_a(),

    )
)
# 渲染可视化界面
page.render("main.html")

运行这段代码会生成以下这个界面：

 我们只需要通过鼠标拖拽这些图片就可以实现自由拼接了。完成后点击html页面的save config就会生成一个json文件。

只需要重新运行以下这端代码重新生成的html文件就固定可视化图表后的界面，这个时候可以事先将page()函数注释后在运行。

Page.save_resize_html("main.html",   # 上面的HTML文件名称
                      cfg_file="chart_config.json",  # 保存的json配置文件
                      dest="new_main.html")  # 新HTML文件名称

PyEcharts提供了丰富的功能和易于使用的接口，使得数据可视化变得更加简单和有趣。通过Echarts，我们可以轻松创建地图、折线图、漏斗图和柱状图等各种类型的图表。希望本文能够帮助你在数据可视化的旅程中取得更好的成果！

主页有完整的demo文件包哦！！！

以下是官方pyecharts指导手册：https://pyecharts.org/#/zh-cn/global_options