【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}的外邊框圓角
                    },
                },
           

系列名的文本在背景色的中間，但是背景色不在統一的邊框中間。

效果如圖：