使用 ECharts 插件繪制炫酷圖表

          <p class="note note-info">
            
              本文最后更新於：3 個月前
            
          </p>
        
        <div class="markdown-body">
          <div class="note note-success">
        <p>本文由 Fluid 用戶授權轉載，版權歸原作者所有。</p><p>本文作者：pxxyyz</p><p>原文地址：<a target="_blank" rel="noopener external nofollow noreferrer" href="https://pxxyyz.com/posts/15698/">https://pxxyyz.com/posts/15698/</a></p>
      </div>

ECharts使用

• 安裝hexo-tag-echarts插件

1	$ npm install hexo-tag-echarts --save Copy

• 注意：ECharts官網教程-5 分鍾上手 ECharts)里的npm install echarts --save並不適合hexo博客，這種安裝方式無效，請安裝hexo-tag-echarts插件。

• 添加如下js文件

1 2 3 4

// 通過jsDelivr的CDN引入echarts <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> // 使用GL里的各種組件時需要添加，否則可不需要 <script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.1/dist/echarts-gl.min.js"></script> Copy

• 在markdown文件下添加echarts，格式如下

1 2 3 4 5 6 7

<script> ... </script> {% echarts 400 '85%' %} ... {% endecharts %} Copy

• <script>中添加定義的變量和函數，若無設定則可刪掉<script></script>
• {% echarts 400 '85%' %}和{% endecharts %}之間添加echarts的option 。
  • 參數400指定圖表展示的高度為400px，85%則指定圖表展示的寬度為85%，如不寫明這兩項參數則默認值為高度400px，寬度81%。
  • title：標題組件，包含主標題和副標題。
  • legend：圖例組件。
  • tooltip：提示框組件。
  • toolbox：工具欄。內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。
  • xAxis、yAxis：直角坐標系 grid 中的 x 軸、y軸。
  • series：系列列表。每個系列通過type決定自己的圖表類型。
    • series-line：折線/面積圖
    • series-bar：柱狀/條形圖
    • series-pie：餅圖
    • series-scatter：散點圖
    • series-radar：雷達圖
    • series-tree：樹圖
    • series-boxplot：箱形圖
    • series-candlestick：K線圖
    • series-heatmap：熱力圖
    • series-graph：關系圖
• 多個圖表的數據和函數可能會沖突，請注意！
• 直接在html中直接繪制，然后用<iframe></iframe>展示效果更佳。關於hexo的html文件渲染問題，可以參考Fluid+自定義html，主要是去掉head部分的說明。
• 在html繪圖ECharts的格式如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> <!-- 為 ECharts 准備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { ... }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); // 刷新調整 window.onresize = function () { myChart.resize(); } </script> Copy

• 部分echart需要引入其他js，如bmap、jquery等，請自行添加。
• 使用百度地圖的api需要申請密鑰(ak)，使用格式如下，注意替換FAKE_AK。

1 2	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=FAKE_AK"></script> <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=FAKE_AK"></script> Copy

實例

下面給出一些echarts官方實例，大多數都可以交互。

折線圖Line

• Stacked area chart

• Area Pieces

• Rainfall

• Line Easing Visualizing

柱狀圖Bar

• 柱狀圖動畫延遲

• 柱狀圖框選

• 極坐標系下的堆疊柱狀圖

餅圖Pie

• Texture on Pie Chart

地理坐標/地圖GEO/Map

• Air Quality - Baidu Map

可進入頁面查看

K 線圖Candlestick

• Candlestick Brush

可進入頁面查看

雷達圖Radar

• Proportion of Browsers

關系圖Graph

• Graph Webkit Dep

可進入頁面查看

樹圖Tree

• Multiple Trees

日歷坐標系Calendar

• Calendar Heatmap Horizontal

3D

• Bar3D - Simplex Noise

可進入頁面查看

• Surface Wave

pyecharts

是什么

Echarts 是一個由百度開源的數據可視化，憑借着良好的交互性，精巧的圖表設計，得到了眾多開發者的認可。而 Python 是一門富有表達力的語言，很適合用於數據處理。當數據分析遇上數據可視化時，pyecharts 誕生了^[2]。

怎么用—py或jupyter

• pip 安裝

1	$ pip install pyecharts -U Copy

• 生成 HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

from pyecharts.charts import Bar from pyecharts import options as opts # V1 版本開始支持鏈式調用 bar = ( Bar() .add_xaxis(["襯衫", "毛衣", "領帶", "褲子", "風衣", "高跟鞋", "襪子"]) .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105]) .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49]) .set_global_opts(title_opts=opts.TitleOpts(title="某商場銷售情況")) ) bar.render() # 不習慣鏈式調用的開發者依舊可以單獨調用方法 bar = Bar() bar.add_xaxis(["襯衫", "毛衣", "領帶", "褲子", "風衣", "高跟鞋", "襪子"]) bar.add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105]) bar.add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49]) bar.set_global_opts(title_opts=opts.TitleOpts(title="某商場銷售情況")) bar.render() Copy

• Demo：pyecharts 畫廊^[3]

參考

1. echarts 官網 ↩
2. pyecharts倉庫 ↩
3. pyecharts 畫廊 ↩

---

          </article>
        
      </article>