前言：有關柱狀圖繪制的代碼&引數決議在第二部分，只需要畫圖的童鞋可以直搗黃龍；如果你是想一起系統學習Echarts的童鞋，其他部分也是很吼的啊！

文章目錄

1.關于Echarts及pyecharts
- 1.1 簡介
- 1.2 版本及安裝
2.Python下Echarts的柱狀圖（Bar）繪制
- 2.1 配置項
- - 2.1.1 初始化配置項
  - 2.1.2 標題配置項
  - 2.1.3 坐標軸配置項
  - 2.1.4 標簽配置項
  - 2.1.5 圖元樣式配置項
- 2.2 幾種柱狀圖代碼范例
- - 2.2.1 Stack Bar（堆疊柱狀圖）
  - 2.2.2 Waterfall Plot（瀑布圖）
  - 2.2.3 Histogram（直方圖）
3.Selenium&Chrome的渲染
- 3.1 Selenium及WebDriver
- - 3.1.1 Selenium的安裝及測驗
  - 3.1.2 配置ChromeDriver
- 3.2 代碼測驗
4.如何和PPT夢幻聯動

1.關于Echarts及pyecharts

1.1 簡介

Echarts對于自身的定義是一個功能強大的互動式圖形和可視化瀏覽器庫(ECharts, a powerful, interactive charting and visualization library for browser)，是不錯的前端資料可視化工具，
Echarts官網

而 pyecharts則將Echarts和適合做資料處理的python聯系起來，提供了三十余種常用圖表（如果不咕咕，我盡量都學下去），
關于pyecharts

1.2 版本及安裝

我使用的pyecharts是v1版本（支持Python3.6+），安裝方式不管是pip安裝還是原始碼安裝都在這個鏈接中有介紹，~~（甚至你可以在編譯器的虛擬環境下手動匯入）~~

2.Python下Echarts的柱狀圖（Bar）繪制

在正文之前，先貼一段可以跑出圖的代碼，不至于看了半天還是兩手空空，

from pyecharts.charts import Bar
bar = (
    Bar()
    .add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])   # 添加橫軸
    .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])  # 添加縱軸
)  # 支持鏈式呼叫
bar.render()

下面的作業就是在基礎上不斷豐富，在功能和外觀上不斷變成我們想要的樣子，

2.1 配置項

pyecharts中的配置項包括全域配置項和系列配置項，這些配置項有初始默認值，直觀上影響著圖表的外觀和功能，熟練了解配置項才能畫出心儀的圖表，（~~挖個坑，如果有時間再寫一篇配置項相關的文~~ ）
先羅列一些常用的配置項及它們對應的功能：

配置項	功能
InitOpts：初始化配置項	畫布大小、主題、背景色等
TitleOpts：標題配置項	主標題、副標題字體位置等
AxisOpts：坐標軸配置項	坐標軸型別、名稱、刻度等
LabelOpts：標簽配置項	標簽位置、文字屬性等
ItemStyleOpts：圖元樣式配置項	圖元顏色、紋理、透明度等

還有一些更進階的配置項，暫時就先不介紹，進階操作可以等一等進階攻略，下面介紹一些繪制柱狀圖，也是其他型別圖表，經常要自定義元素的配置項定義方法：

2.1.1 初始化配置項

在定義配置項之前，先把萬物opts:

from pyecharts import options as opts

首先是畫布大小的定義，默認值為900px*500px，可以按照以下代碼調整：

bar = Bar(init_opts=opts.InitOpts(width="3000px", height="1500px"))  # 3000px*1500px

其次pyecharts 內置提供了 10+ 種不同的風格，另外也提供了便捷的定制主題的方法，默認風格為WHITE，除此之外有LIGHT,DARK,ROMANTIC等，放幾張不同風格感受一下，
在這里插入圖片描述
設定方法如下：

from pyecharts.globals import ThemeType  # 匯入ThemeType
bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))  # LIGHT可以替換成喜歡的風格

當然有時候由于預設PNG格式的圖表無背景，在預覽時的白底下載后變成黑底，這時候可以通過設定背景顏色來調整，

bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.WONDERLAND, bg_color="white"))

對比效果：在這里插入圖片描述
如果你還有更多想法，插入背景圖也可以，（我隨便做的，確實挺丑）

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.globals import ThemeType
from pyecharts.commons.utils import JsCode

bar = (
        Bar(init_opts=opts.InitOpts(theme=ThemeType.WESTEROS,
                                    bg_color={"type": "transparent", "image": JsCode("img")},  #默認重復堆疊，可以設定"repeat":"no-repeat"取消
                                    width="1000px", height="500px"))
        .add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
        .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
)
bar.add_js_funcs(
    """
    var img = new Image(); img.src = 'https://t7.baidu.com/it/u=3121829245,1362696912&fm=193&f=GIF';
    """
)  # 圖片路徑
bar.render

在這里插入圖片描述

2.1.2 標題配置項

主副標題命名及標題間間距：

bar.set_global_opts(title_opts=opts.TitleOpts(title="這里是主標題", subtitle="這里是副標題", item_gap=10))

在這里插入圖片描述

2.1.3 坐標軸配置項

坐標軸的型別包括value（數值軸），category（類目軸），time（時間軸），log（對數軸），利用不同型別的坐標軸可以做出復合圖表，而對于基礎的柱狀圖，一些常用的坐標軸配置可以參照如下代碼：

bar = (
        Bar(init_opts=opts.InitOpts(theme=ThemeType.PURPLE_PASSION, width="2000px", height="1000px"))
        .add_xaxis(["價格九磅十五便士的襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
        .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
        .reversal_axis()  # 進行一個軸的旋轉
        .set_global_opts(title_opts=opts.TitleOpts(title="這里是主標題", subtitle="這里是副標題", item_gap=10),
                         yaxis_opts=opts.AxisOpts(name="銷售數量", name_gap=40, axislabel_opts=opts.LabelOpts(rotate=-15)),  # y軸命名,設定坐標軸名稱與坐標軸間距，并且旋轉防止名稱過長
                         xaxis_opts=opts.AxisOpts(name="商品名稱"),  # x軸命名
                         )
)

在這里插入圖片描述

2.1.4 標簽配置項

標簽包括資料的標簽和坐標軸的標簽，設定的方式大同小異，而事實上標簽配置項內置的formatter是個很復雜的東西，可以賦予標簽計算，文字組合等多功能，例如在柱狀圖中刻度是自動生成的，但可以通過formatter給數值刻度加上單位，

bar=
( Bar()
  .set_global_opts(yaxis_opts=opts.AxisOpts(name="銷售數量", axislabel_opts=opts.LabelOpts(formatter="{value}件"))   # 坐標軸標簽修改
  .set_series_opts(label_opts=opts.LabelOpts(position="right")) # 資料標簽位置修改至右側

在這里插入圖片描述

2.1.5 圖元樣式配置項

對于柱狀圖，圖元就是柱，可以定義柱的屬性，比如下面這個漸變圓柱，

 itemstyle_opts={
            "normal": {
                "color": JsCode(
                    """new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 244, 255, 1)'
            }, {
                offset: 1,
                color: 'rgba(0, 77, 167, 1)'
            }], false)"""
                ),
                "barBorderRadius": [30, 30, 30, 30],
                "shadowColor": "rgb(0, 160, 221)",
            }

在這里插入圖片描述

2.2 幾種柱狀圖代碼范例

2.2.1 Stack Bar（堆疊柱狀圖）

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.commons.utils import JsCode
from pyecharts.globals import ThemeType

bottom = [
    {"value": 12, "percent": 12 / (12 + 3)},
    {"value": 23, "percent": 23 / (23 + 21)},
    {"value": 33, "percent": 33 / (33 + 5)},
]
up = [
    {"value": 3, "percent": 3 / (12 + 3)},
    {"value": 21, "percent": 21 / (23 + 21)},
    {"value": 5, "percent": 5 / (33 + 5)},
]  # 分別定義堆疊底層和上層的資料
c = (
    Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
    .add_xaxis([1, 2, 3])
    .add_yaxis("product1", bottom, stack="stack1", category_gap="50%")
    .add_yaxis("product2", up, stack="stack1", category_gap="50%")
    .set_series_opts(
      label_opts=opts.LabelOpts(position="right",
                                formatter=JsCode("function(x){return Number(x.data.percent * 100).toFixed() + '%';}"),)
    )
)
c.render("StackBar.html")

在這里插入圖片描述

2.2.2 Waterfall Plot（瀑布圖）

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

x_data = [f"12月{str(i)}日" for i in range(1, 6)]
y_total = [0, 900, 1245, 1530, 1376]
y_in = [900, 345, 393, "-", "-"]
y_out = ["-", "-", "-", 108, 154] # 堆疊由三部分構成
bar = (
    Bar()
    .add_xaxis(xaxis_data=x_data)
    .add_yaxis(series_name="", y_axis=y_total, stack="總量", itemstyle_opts=opts.ItemStyleOpts(color="rgba(0,0,0,0)"),) # 將總量設為無色實作堆疊
    .add_yaxis(series_name="收入", y_axis=y_in, stack="總量")
    .add_yaxis(series_name="支出", y_axis=y_out, stack="總量") 
    .set_global_opts(yaxis_opts=opts.AxisOpts(type_="value"))
    .render("waterfall_plot.html")
)

在這里插入圖片描述

2.2.3 Histogram（直方圖）

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

c = (
    Bar()
    .add_xaxis([60, 70, 80, 90, 100])
    .add_yaxis("應用統計學", [20, 40, 70, 50, 10], category_gap=0, color="purple")
    .set_global_opts(title_opts=opts.TitleOpts(title="直方圖"),
                     yaxis_opts=opts.AxisOpts(name="人數"),
                     xaxis_opts=opts.AxisOpts(name="分數"))
    .render("histogram.html")
)

在這里插入圖片描述

3.Selenium&Chrome的渲染

當然除了在本地目錄生成html的輸出，pyecharts也提供了渲染圖片的功能，我用的是make_snapshot功能下的snapshot-selenium， selenium配合Chrome完成圖片的渲染生成，
如果你覺得HTML下另存為圖片或者截屏已經可以滿足需求，那這一部分就可以跳過了，

3.1 Selenium及WebDriver

Selenium是一個用于Web應用程式測驗的工具，可以實作測驗自動化，可以按照理解按鍵精靈的方式理解，Selenium的使用需要搭配不同瀏覽器的webdriver，簡單介紹一下Selenium的安裝以及和Chrome的ChromeDriver配置，

3.1.1 Selenium的安裝及測驗

pyecharts官方檔案中給出了shell下pip的方法，

pip install snapshot-selenium

Windows也可以采用

pip install -U selenium

不過我還是研究了一下手動安裝的方法，提供給對命令視窗沒有辣么熟悉的童鞋，

1.下載最新版本的Selenium

2.在下載的jar包里寫一個bat文本：
java -jar selenium-server-standalone-3.141.59.jar
（3.141.59為最新的版本號，根據自己版本更改）

3.運行bat，如果成功會提示Selenium server is up and running on port 4444.（附一張測驗成功圖）
在這里插入圖片描述

3.1.2 配置ChromeDriver

下載ChromeDriver

上面提供的鏈接需要翻墻，根據自己的Chrome版本選擇ChromeDriver的版本，（可以在Chrome的幫助-關于里面看到版本），

下載解壓后，手動創建一個存放瀏覽器驅動的目錄，如： D:\ChromeDriver , 把下載的瀏覽器驅動exe檔案復制過去，然后就是配置環境變數（此電腦-高級系統設定-環境變數-path）,把驅動目錄添加進去，就完成了，

理論上，這樣已經配置完成了，如果運行還出現’chromedriver’ executable needs to be in PATH的報錯，就把這個驅動分別復制到Chrome和Python的根目錄下，然后再在環境變數中添加Chrome的路徑（Google\Chrome\Application），

3.2 代碼測驗

附上一段測驗代碼，如果可以順利運行，那么一張名為開心面具的PNG就會生成在檔案夾里，

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.render import make_snapshot

from snapshot_selenium import snapshot

def bar_chart() -> Bar: 
    c = (
        Bar()
        .add_xaxis(["襯衫", "毛衣", "領帶", "褲子", "風衣", "高跟鞋", "襪子"])
        .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
        .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
        .reversal_axis()
        .set_series_opts(label_opts=opts.LabelOpts(position="right"))
        .set_global_opts(title_opts=opts.TitleOpts(title="測驗Selenium&Chrome渲染圖片"))
    )
    return c

make_snapshot(snapshot, bar_chart().render(), "開心面具.png")

測驗成功圖片

4.如何和PPT夢幻聯動

截至目前，畫圖的部分基本結束了，但是本著一條龍的精神，好看的圖當然要在匯報中展示出來，Echarts的一大特色是前端互動，單純一張靜態圖片其實損失了大量資訊，所以接下來要完成的就是將代碼生成的HTML嵌入PPT，讓PPT也能完成互動演示，步驟主要包括：注冊表修改、插入Web Browser并編程、宏安全及Active X設定，

這些具體的步驟，前人之述備矣，默默放個鏈接供大家參考：點我看如何和PPT夢幻聯動，

當然，這里結合我自己的操作說兩個比較難解決的地方：
1 安全警告

在這里插入圖片描述
雖然直接在彈窗中選擇忽略就可以解決問題，但會大大影響展示的連貫性，可以在生成的HTML中的和< html>中間添加如下代碼：

<!-- saved from url=(0031)http://echarts.apache.org/zh/index.html/ -->

在這里插入圖片描述
這一行代碼可以隱藏安全提示條，具體機制涉及到IE的Local Machine Zone，

2 匯入的網頁還是靜態，并不能互動

將HTML中< head>部分中的meta修改：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>>

在這里插入圖片描述
3 展示比例

pyecharts默認生成的HTML是在左上角的，可以通過更改render組態檔等一些操作使得圖表可以自適應大小，提供一個鏈接，當然如果覺得太復雜，就根據你的螢屏解析度去調整圖表的大小（具體方法見第二章），使得圖表大小能與設定的演示區域匹配，

以上就是pyecharts第一次分享的內容，第一次寫博不太熟練，內容也偏多，下一次學習的內容應該是有關柱狀圖的動態展示，希望我不要咕咕咕，

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/239055.html

標籤：python

上一篇：2020-12-22 前端操作小技巧

下一篇：Python實驗-字典攻擊

把資料做得更好看1——Echarts基礎柱狀圖繪制&渲染&PPT聯動（Python資料可視化）

文章目錄

1.關于Echarts及pyecharts

1.1 簡介

1.2 版本及安裝

2.Python下Echarts的柱狀圖（Bar）繪制

2.1 配置項

2.1.1 初始化配置項

2.1.2 標題配置項

2.1.3 坐標軸配置項

2.1.4 標簽配置項

2.1.5 圖元樣式配置項

2.2 幾種柱狀圖代碼范例

2.2.1 Stack Bar（堆疊柱狀圖）

2.2.2 Waterfall Plot（瀑布圖）

2.2.3 Histogram（直方圖）

3.Selenium&Chrome的渲染

3.1 Selenium及WebDriver

3.1.1 Selenium的安裝及測驗

3.1.2 配置ChromeDriver

3.2 代碼測驗

4.如何和PPT夢幻聯動