今日心情 ：em....又是一堆蛋疼的事情堆積的一周...文章會遲到，但不會缺席，準備好腦子接收下

[pyecharts1.8] 系列配置之標簽設置

本文檔(以及pyecharts使用手冊中的其他文檔)將會持續更新。 有些內容標記為待更新的，有時間我會補充上。急需的可以在評論處留言，或者可關注微信公眾號「燃燒吧數據」(id：data-fired)，聊天框輸入暗號：江湖救急，即可召喚小姐姐一枚～

---

[pyecharts1.8] 系列配置之標簽設置Python3樣例代碼一、標簽設置is_show：是否顯示標簽position：標簽的位置color：文字的顏色distance：距離圖形元素的距離font_size：文字的字體大小font_style：文字字體的風格font_weight：文字字體的粗細font_family：文字字體rotate：標簽旋轉margin：標簽與軸線之間的距離interval：坐標軸刻度標簽的顯示間隔horizontal_align：文字水平對齊方式vertical_align：文字垂直對齊方式formatter：標簽內容格式器background_color：文字塊背景色border_color：文字塊邊框顏色border_width：文字塊邊框寬度border_radius：文字塊的圓角rich：自定義富文本樣式二、視覺引導線設置show：是否顯示視覺引導線length：視覺引導線的長度lineStyle：視覺引導線的樣式

Python3樣例代碼

?# -*- coding:utf-8 _*-from pyecharts import options as optsfrom pyecharts.charts import Funnelfrom pyecharts.commons.utils import JsCodefrom pyecharts.faker import Fakerdata = [ ['襪子', 54], ['高跟鞋', 92], ['風衣', 41], ['領帶', 28], ['襯衫', 60], ['毛衣', 100], ['褲子', 112]]chart1 = ( Funnel() .add("商品", data_pair=data) .set_global_opts(title_opts=opts.TitleOpts(title="系列配置之標簽設置")) .set_series_opts( label_opts=opts.LabelOpts( is_show=True, # bool position='', # Union[str, Sequence] color='', # Optional[str] distance='', # Union[Numeric, Sequence, None] font_size=10, # Optional[Numeric] font_style='', # Optional[str] font_weight='', # Optional[str] font_family='', # Optional[str] rotate=0, # Optional[Numeric] margin=0, # Optional[Numeric] interval='', # Union[Numeric, str, None] horizontal_align='', # Optional[str] vertical_align='', # Optional[str] formatter='{a}:{c}(ozvdkddzhkzd%)', # Optional[JSFunc] # formatter=JsCode(""" # function(params) { # if (params.dataIndex === 2) { # return 'formatter'; # } else { # return params.value; # } # } # """), background_color='', # Optional[str] border_color='', # Optional[str] border_width=2, # Optional[Numeric] border_radius=2, # Optional[Numeric] rich={}, # Optional[dict] ), # labelLine={'show': True, # 'length': 30, # 'lineStyle': opts.LineStyleOpts( # width=1, # opacity=1, # curve=5, # type_="dashed", # color=None, # ) # } labelLine={ 'show': True, 'length': 10, 'lineStyle': { 'width': 1, 'opacity': 1, 'type': "dotted", 'color': None, 'shadowBlur': 6, 'shadowColor': 'green', 'shadowOffsetX': 0, 'shadowOffsetY': 0 } } ))

一、標簽設置

圖形上的文本標簽，可用于說明圖形的一些數據信息，比如值，名稱等

標簽在opts.LabelOpts()中設置

is_show：是否顯示標簽

position：標簽的位置

可選：

• 'left'：圖左側，通過視覺引導線連到相應的梯形。

• 'right': 圖右側，通過視覺引導線連到相應的梯形。

• 'inside'：圖內部

• 'insideRight'：圖內部右側。

• 'insideLeft'：圖內部左側。

• 'leftTop'：圖左側上部。

• 'leftBottom'：圖左側下部。

• 'rightTop'：圖右側上部。

• 'rightBottom'：圖右側下部。

• 'inner' ：同 'inside'。

• 'center'：同 'inside'。

color：文字的顏色

如果設置為'auto'，則為視覺映射得到的顏色，如系列色。

distance：距離圖形元素的距離

當 position 為字符描述值(如'top'、'insideRight')時候有效

font_size：文字的字體大小

font_style：文字字體的風格

可選：'normal'、'italic'、'oblique'

font_weight：文字字體的粗細

可選：

• 'normal'

• 'bold'

• 'bolder'

• 'lighter'

• 100 | 200 | 300 | 400

font_family：文字字體

可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

rotate：標簽旋轉

從 -90 度到 90 度。正值是逆時針。

margin：標簽與軸線之間的距離

interval：坐標軸刻度標簽的顯示間隔

horizontal_align：文字水平對齊方式

默認自動。

可選：

• 'left'

• 'center'

• 'right'

vertical_align：文字垂直對齊方式

默認自動。

可選：

• 'top'

• 'middle'

• 'bottom'

formatter：標簽內容格式器

支持字符串模板和回調函數兩種形式，字符串模板與回調函數返回的字符串均支持用 \n 換行。

• 字符串模板

字符串模板模板變量有：

• {a}：系列名。

• {b}：數據名。

• {c}：數據值。

• ozvdkddzhkzd：百分比。

• {@xxx}：數據中名為'xxx'的維度的值，如{@product}表示名為'product'` 的維度的值。

• {@[n]}：數據中維度n的值，如{@[3]}` 表示維度 3 的值，從 0 開始計數。

示例：

?formatter: '{b}: ozvdkddzhkzd'

• 回調函數

回調函數格式：

?(params: Object|Array) => string

參數 params 是 formatter 需要的單個數據集。格式如下：

?{ componentType: 'series', // 系列類型 seriesType: string, // 系列在傳入的 option.series 中的 index seriesIndex: number, // 系列名稱 seriesName: string, // 數據名，類目名 name: string, // 數據在傳入的 data 數組中的 index dataIndex: number, // 傳入的原始數據項 data: Object, // 傳入的數據值。在多數系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中) value: number|Array|Object, // 坐標軸 encode 映射信息， // key 為坐標軸(如 'x' 'y' 'radius' 'angle' 等) // value 必然為數組，不會為 null/undefied，表示 dimension index 。 // 其內容如： // { // x: [2] // dimension index 為 2 的數據映射到 x 軸 // y: [0] // dimension index 為 0 的數據映射到 y 軸 // } encode: Object, // 維度名列表 dimensionNames: Array<String>, // 數據的維度 index，如 0 或 1 或 2 ... // 僅在雷達圖中使用。 dimensionIndex: number, // 數據圖形的顏色 color: string, // 百分比 percent: number,}

注：encode 和 dimensionNames 的使用方式，例如：

如果數據為：

?dataset: { source: [ ['Matcha Latte', 43.3, 85.8, 93.7], ['Milk Tea', 83.1, 73.4, 55.1], ['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut Brownie', 72.4, 53.9, 39.1] ]}

則可這樣得到 y 軸對應的 value：

?params.value[params.encode.y[0]]

如果數據為：

?dataset: { dimensions: ['product', '2015', '2016', '2017'], source: [ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7}, {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1}, {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5}, {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1} ]}

則可這樣得到 y 軸對應的 value：

?params.value[params.dimensionNames[params.encode.y[0]]]

background_color：文字塊背景色

可以使用顏色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。

也可以直接使用圖片，例如：

?backgroundColor: { image: 'xxx/xxx.png' // 這里可以是圖片的 URL， // 或者圖片的 dataURI， // 或者 HTMLImageElement 對象， // 或者 HTMLCanvasElement 對象。}

當使用圖片的時候，可以使用 width 或 height 指定高寬，也可以不指定自適應。

border_color：文字塊邊框顏色

border_width：文字塊邊框寬度

border_radius：文字塊的圓角

rich：自定義富文本樣式

例如：

?label: { // 在文本中，可以對部分文本采用 rich 中定義樣式。 // 這里需要在文本中使用標記符號： // `{styleName|text content text content}` 標記樣式名。 // 注意，換行仍是使用 '\n'。 formatter: [ '{a|這段文本采用樣式a}', '{b|這段文本采用樣式b}這段用默認樣式{x|這段用樣式x}' ].join('\n'), rich: { a: { color: 'red', lineHeight: 10 }, b: { backgroundColor: { image: 'xxx/xxx.jpg' }, height: 40 }, x: { fontSize: 18, fontFamily: 'Microsoft YaHei', borderColor: '#449933', borderRadius: 4 }, ... }}

二、視覺引導線設置

查看Echarts的配置項文檔可以發現，Echarts是支持視覺引導線的配置的，

但是pyecharts的配置項沒有labelLine對應的options。不過查看pyecharts源碼可以發現set_series_opts方法是支持傳入關鍵詞參數的，所以即使沒有視覺引導線的options，我們仍可以通過傳入參數，配置視覺引導線的樣式

補充一句，pyecharts 對配置項基本上都采用 XXXOpts/XXXItems 以及 dict 兩種數據形式，這兩種是完全等價的。

比如下面三者效果是一致的

?c = Bar(init_opts=opts.InitOpts(width="620px", height="420px"))c = Bar(dict(width="620px", height="420px"))c = Bar({"width": "620px", "height": "420px"})

show：是否顯示視覺引導線

length：視覺引導線的長度

lineStyle：視覺引導線的樣式

• opacity：線透明度

  支持從 0 到 1 的數字，為 0 時不繪制該圖形。

• width：線寬

  0 表示完全不彎曲

• type：線的類型

  可選：

  • 'solid'：實線

  • 'dashed'：虛線

  • 'dotted'：點狀線

• color：線的顏色

  顏色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六進制格式，比如 '#ccc'。除了純色之外顏色也支持漸變色和紋理填充

  ?// 線性漸變：前四個參數分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當于在圖形包圍盒中的百分比，如果 globalCoord 為 `true`，則該四個值是絕對的像素位置color:{ type： 'linear', x： 0, y： 0, x2： 0, y2： 1, colorStops： [{ offset： 0, color： 'red' // 0% 處的顏色 }, { offset： 1, color： 'blue' // 100% 處的顏色 }], global： false // 缺省為 false}?//徑向漸變：前三個參數分別是圓心 x, y 和半徑，取值同線性漸變color:{ type： 'radial', x： 0.5, y： 0.5, r： 0.5, colorStops： [{ offset： 0, color： 'red' // 0% 處的顏色 }, { offset： 1, color： 'blue' // 100% 處的顏色 }], global： false // 缺省為 false}?// 紋理填充color:{ image： imageDom, // 支持為 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串 repeat： 'repeat' // 是否平鋪, 可以是 'repeat-x', 'repeat-y', 'no-repeat'}

• shadowBlur：圖形陰影的模糊大小

  該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。

• shadowColor：陰影顏色

  支持的格式同color

• shadowOffsetX：陰影水平方向上的偏移距離

• shadowOffsetY：陰影垂直方向上的偏移距離

---

有疑問可關注微信公眾號「燃燒吧數據」(id：data-fired)，聊天框輸入暗號：江湖救急，即能召喚小姐姐一枚～

歡迎大家一起交流探討。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的a标签传参接收_[pyecharts1.8] 系列配置之标签设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。