【Pyecharts-学习笔记系列之Pie（三）】

Pyecharts-学习笔记系列之Pie_Nested_pies

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

inner_x_data = ["直达", "营销广告", "搜索引擎"]
inner_y_data = [335, 679, 1548]
inner_data_pair = [list(z) for z in zip(inner_x_data,inner_y_data)]
print("inner_data_pair = ",inner_data_pair )

outer_x_data = ["直达", "营销广告", "搜索引擎", "邮件营销", "联盟广告", "视频广告", "百度", "谷歌", "必应", "其他"]
outer_y_data = [335, 310, 234, 135, 1048, 251, 147, 102]
outer_data_pair = [list(z) for z in zip(outer_x_data,outer_y_data)]
print("outer_data_pair = ",outer_data_pair )

c = (
    Pie(init_opts=opts.InitOpts(width="1600px",height="800px"))
    .add(
        series_name="访问来源",
        data_pair=inner_data_pair,
        radius=[0,"30%"],    # 饼图的半径，数组的第一项是内半径，第二项是外半径
        label_opts=opts.LabelOpts(position="inside"),  # 标签的位置，inner也可以。在https://pyecharts.org/#/zh-cn/series_options?id=labelopts%ef%bc%9a%e6%a0%87%e7%ad%be%e9%85%8d%e7%bd%ae%e9%a1%b9
        # 中没有inner,outside选项，但是程序识别。
        )
    .add(
        series_name="访问来源",
        data_pair=outer_data_pair,
        radius=["40%","55%"],
        label_opts=opts.LabelOpts(
            position="outside",
            # 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
            # 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
            # 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter="{a|{a}}{abg|}\n{hr|}\n{b|{b}:}{c} {per|{d}%}",  # 使用（|）分隔属性和值。{hr|}之后需要加入换行符，否则分割线在框外{hr|}
            background_color="#eee",  # 标签的统一背景
            border_color="#aaa",
            border_width=1,
            border_radius=20,     # 总的标签的外边框圆角
            # 在rich里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果
            # https://echarts.apache.org/handbook/zh/how-to/label/rich-text/#%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9
            rich={
                "a":{"color":"#999","lineHeight":22,"align":"center",
                     },
                "abg":{        # a的背景
                    "backgroundColor":"yellow", # "#e3e3e3"
                    "width":"100%",
                    "align":"right",
                    "height":22,
                    "borderRadius":[4,4,20,20],  # [4,4,0,0] {a}的外边框圆角
                    },
                "hr":{
                    "borderColor":"#blue",
                    "width":"100%",
                    "borderWidth":0.5,
                    "height":0,
                    },
                "b":{"fontSize":16,
                     "lineHeight":33,
                     "backgroundColor":"red",
                     },
                "per":{
                    "color":"#eee",
                    "backgroundColor":"#334455",
                    "padding":[2,4],
                    "borderRadius":5, # {d}的外边框圆角
                    },
                },
            ),
        )
    .set_global_opts(legend_opts=opts.LegendOpts(pos_left="left", # 值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
                                                 orient="vertical",# 图例列表的布局朝向。可选：'horizontal', 'vertical'
                                                 )
                     )
    .set_series_opts(
        tooltip_opts=opts.TooltipOpts(
            trigger="item",  # 触发类型。'item': 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            formatter="{a}<br>{b}:{c}({d}%)",  # 标签内容格式器 ,均支持用 \n ,<br>换行。
            # 字符串模板 模板变量有：
            # {a}：系列名。
            # {b}：数据名。
            # {c}：数据值。
            # {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product'` 的维度的值。
            # {@[n]}：数据中维度 n 的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。
            # 示例：formatter: '{b}: {@score}'
            )
        )
    .render("nested_pies.html")
    )

           

效果如图：

如果将rich部分修改，{a}和{abg}合并：

rich={
                "a":{"color":"#999",
                     "lineHeight":22,
                    "backgroundColor":"yellow", # "#e3e3e3"
                    "width":"100%",
                    "align":"center",   #文本在背景色的中间，但是背景色不在统一的边框中间。
                    "height":22,
                    "borderRadius":[4,4,20,20],  # [4,4,0,0] {a}的外边框圆角
                    },
                "hr":{
                    "borderColor":"#blue",
                    "width":"100%",
                    "borderWidth":0.5,
                    "height":0,
                    },
                "b":{"fontSize":16,
                     "lineHeight":33,
                     "backgroundColor":"red",
                     },
                "per":{
                    "color":"#eee",
                    "backgroundColor":"#334455",
                    "padding":[2,4],
                    "borderRadius":5, # {d}的外边框圆角
                    },
                },
           

系列名的文本在背景色的中间，但是背景色不在统一的边框中间。

效果如图：