閱讀本用戶子頁面的任何人都可以參與編輯。
本頁的內容因筆者能力有限，可能存在部分難以理解的文字，歡迎瞭解相關內容的編輯者協助改善或在我的討論頁提出改進建議。
📈
本頁的部分內容基於Apache ECharts官方文檔。
Apache ECharts是一個基於JavaScript的開源可視化圖表庫。[1]通過它，你可以輕鬆地在網站上繪製各種圖表。
進入正題。令人高興的是，萌百上已經有了渲染ECharts圖表的模板——{{Echart}}。本頁面將簡單介紹如何使用該模板繪製一個展示用戶每月編輯歷史的折線圖。為了方便後文介紹，先放出成品：
{
"title": {
"text": "我的編輯歷史",
"subtext": "按月統計次數",
"subtextStyle": {
"color": "#333"
}
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross",
"animation": false
}
},
"toolbox": {
"show": true,
"feature": {
"dataZoom": {
"yAxisIndex": "none"
},
"dataView": {
"readOnly": true
},
"magicType": {
"type": [
"line",
"bar"
]
},
"restore": {},
"saveAsImage": {
"excludeComponents": [
"toolbox",
"dataZoom"
]
}
}
},
"axisPointer": {
"link": {
"xAxisIndex": "all"
}
},
"dataZoom": [
{
"type": "inside",
"xAxisIndex": [
0
],
"startValue": 0,
"end": 100
},
{
"show": true,
"xAxisIndex": [
0
],
"type": "slider",
"start": 0,
"end": 100
}
],
"legend": {
"data": [
"編輯次數"
]
},
"xAxis": {
"data": [
"2021年3月",
"2021年4月",
"2021年5月"
]
},
"yAxis": {},
"series": [
{
"name": "編輯次數",
"type": "line",
"label": {
"formatter": "{c}",
"distance": 0,
"backgroundColor": "transparent",
"padding": 1
},
"data": [
{
"value": 572,
"label": {
"show": false
}
},
{
"value": 312,
"label": {
"show": true,
"position": "bottom"
}
},
{
"value": 290,
"label": {
"show": false
}
}
],
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
],
"silent": true
},
"markLine": {
"data": [
{
"type": "average",
"name": "平均值"
}
],
"silent": true
}
}
],
"animation": false
}圖表數據頁面：User:GuoPC/ECExample1
下面針對該實例進行介紹。
數據頁面的建立
為了實現類似於上面的效果，我們需要一個用於模板接收數據的頁面（以下簡稱「數據頁面」），頁面內容模型必須為JSON。
實際上，在使用ECharts繪製圖表之前需要在伺服器端進行一定的配置，但這些都已經預先準備好了。我們可以自定義的部分是一個被稱為setOption的函數。該函數用於設置圖表實例的配置項以及數據，所有參數和數據的修改都可以通過其完成。[2]
可以認為模板已定義好的內容大致為：
<div class="echart-app">
<div class="echart-data">
<!-- 此處為從數據頁面接收的數據 -->
</div>
<div class="echart-main">
<div>
<canvas></canvas>
</div>
</div>
</div>
其中echart-data對應<div>中的內容即為數據頁面中的內容，也就是我們需要重點編寫的。
創建頁面
與創建一般的用戶子頁面相同，您可以通過在搜索框輸入User:您的用戶名/數據頁面名稱創建，也可在下方輸入框中輸入您想要的數據頁面名稱後點擊右側按鈕創建（這裡數據頁面名稱默認取contributions）：
準備數據
目前普遍採用手動統計的方式獲取數據。即轉到您的貢獻頁面，選定好起止日期[3]後統計。當然，當數目較大時，可以通過複製當月的貢獻記錄，然後粘貼到可以顯示行數的文本編輯器（例如開啟狀態欄的Windows Notepad，whatever）以減少工作量。
頁面編寫
可以考慮使用諸如Visual Studio Code的代碼編輯器編寫JSON文件，再粘貼到您剛創建好的頁面。
數據的框架可能看起來長成這樣：
{
"title": {...},
"tooltip": {...},
"toolbox": {...},
"axisPointer": {...},
"dataZoom": [{...}],
"legend": {...},
"xAxis": {...},
"yAxis": {...},
"series": [{...}],
"animation": false
}
最外側花括號中的鍵實際上是setOption函數支持的所有鍵。[4][5]下面僅根據上面的實例對這些鍵做具體介紹。
太多不看版
如果您只關注如何將每月的編輯數轉化為折線圖，那麼只要瞭解xAxis和series的一部分即可。其餘部分可參照官方文檔[5]或其他已經寫好的用戶處[6]查看。
xAxisxAxisxAxis即為x軸，您可以通過在其中添加data: []來指定x軸的數據。例如：
"xAxis": {
"data": [
"2021年3月",
"2021年4月",
"2021年5月"
]
}
- 這段代碼指定了x軸的數據為「2021年3月」「2021年4月」「2021年5月」，實際圖表中x軸就會有這三個值。
seriesseriesseries指定圖表系列，大致結構為："series": [
{
...,
"data": [{"value": ..., "label": {...}}],
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"markLine": {
"data": [
{
"type": "average",
"name": "平均值"
}
]
}
}
]
data中指定:- 單個數據項的數值（
value），您可以在這裡填入當月編輯數； - 標籤（
label）是否顯示（show），"show": true則顯示、"show": false則不顯示； - 標籤位置（
position），需要"show": true。"position": "bottom"則顯示在點的下方，"position": "top"則顯示在點的上方。
- 單個數據項的數值（
markPoint用於標註特殊點，上面的代碼中標註出了最大值點和最小值點；markLine用於標註特殊線，上面的代碼中標註出了平均值線。
- 示例
- 假設2021年3月編輯數為572，4月為312，5月為290，綜合前面
xAxis的代碼，則可寫出：
"series": [
{
...,
"data": [
{
"value": 572,
"label": {
"show": false
}
},
{
"value": 312,
"label": {
"show": true,
"position": "bottom"
}
},
{
"value": 290,
"label": {
"show": false
}
}
],
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"markLine": {
"data": [
{
"type": "average",
"name": "平均值"
}
]
}
}
]
- 說明：
- 因為在
markPoint中標出了最大值和最小值點，於是將最大值572和最小值290對應點設置"show": false。[7]
- 因為在
完整版
此章節介紹示例中涉及到的所有鍵。[5]
titletitletitle為標題組件，包含主標題和副標題。例如：
"title": {
"text": "我的編輯歷史",
"subtext": "按月統計次數",
"subtextStyle": {
"color": "#333"
}
}
- 這段代碼指定了：
- 主標題（
text）為「我的編輯歷史」； - 副標題（
subtext）為「按月統計次數」； - 副標題樣式（
subtextStyle）為對象，其中有一個鍵值對：文本顏色為#333。
- 主標題（
tooltiptooltiptooltip為提示框組件。例如：
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross",
"animation": false
}
}
- 這段代碼指定了：
- 觸發類型（
trigger）為坐標軸觸發（axis），主要在柱狀圖、折線圖等會使用類目軸的圖表中使用； - 坐標軸指示器（
axisPointer）對象，其中有兩個鍵值對：指示器類型為十字準星指示器、不開啟動畫。
- 觸發類型（
toolboxtoolboxtoolbox為工具欄。例如：
"toolbox": {
"show": true,
"feature": {
"dataZoom": {
"yAxisIndex": "none"
},
"dataView": {
"readOnly": true
},
"magicType": {
"type": ["line", "bar"]
},
"restore": {},
"saveAsImage": {
"excludeComponents": ["toolbox", "dataZoom"]
}
}
}
- 這段代碼指定了：
- 顯示工具欄組件（
show）； - 各工具配置項（
feature）對象，其中有五個鍵值對：- 數據區域縮放（
dataZoom）對象，其中有一個鍵值對：y軸索引為空，即不控制任何y軸； - 數據視圖（
dataView）對象，其中有一個鍵值對：只讀，即不可編輯； - 動態類型（
magicType）對象，其中有一個鍵值對：啟用的動態類型為折線圖和柱狀圖； - 配置項還原（
restore）為空； - 保存為圖片（
saveAsImage）對象，其中有一個鍵值對：忽略的組件列表為工具欄（toolbox）和數據區域縮放組件（dataZoom）。
- 數據區域縮放（
- 顯示工具欄組件（
axisPointeraxisPointeraxisPointer為坐標軸指示器。例如：
"axisPointer": {
"link": {
"xAxisIndex": "all"
}
}
- 這段代碼指定了：
- 聯動（
link）對象，其中有一個鍵值對：所有的x軸進行聯動。
- 聯動（
dataZoomdataZoomdataZoom為數據區域縮放組件。例如：
"dataZoom": [
{
"type": "inside",
"xAxisIndex": [0],
"startValue": 0,
"end": 100
},
{
"show": true,
"xAxisIndex": [0],
"type": "slider",
"start": 0,
"end": 100
}
]
- 這段代碼指定了兩個對象。其中第一個對象指定了：
- 數據區域縮放組件類型（
type）為內置型（inside），即可以通過滑鼠拖拽和滾輪滾動來縮放坐標系； - 控制的x軸（
xAxisIndex）為第一個x軸； - 數據區域的起始值（
startValue）為0； - 數據區域的結束百分比（
end）為100%。
- 數據區域縮放組件類型（
- 第二個對象指定了：
- 數據區域縮放組件類型（
type）為滑動條型（slider），即展示數據縮略圖； - 顯示該滑動條組件（
show）； - 控制的x軸（
xAxisIndex）為第一個x軸； - 數據區域的起始百分比（
start）為0%； - 數據區域的結束百分比（
end）為100%。
- 數據區域縮放組件類型（
legendlegendlegend為圖例組件。例如：
"legend": {
"data": [
"編輯次數"
]
}
- 這段代碼指定了：
- 圖例的數據數組（
data）為一個字符串「編輯次數」。其與series中的圖表名稱（name）對應。
- 圖例的數據數組（
xAxisxAxisxAxis為直角坐標系的x軸。例如：
"xAxis": {
"data": [
"2021年3月",
"2021年4月",
"2021年5月"
]
}
- 這段代碼指定了：
- x軸的數據數組（
data）為三個字符串。
- x軸的數據數組（
yAxisyAxisyAxis為直角坐標系的y軸。
seriesseriesseries指定圖表系列。例如："series": [
{
"name": "編輯次數",
"type": "line",
"label": {
"formatter": "{c}",
"distance": 0,
"backgroundColor": "transparent",
"padding": 1
},
"data": [
{
"value": 572,
"label": {
"show": false
}
},
{
"value": 312,
"label": {
"show": true,
"position": "bottom"
}
},
{
"value": 290,
"label": {
"show": false
}
}
],
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"markLine": {
"data": [
{
"type": "average",
"name": "平均值"
}
]
}
}
]
- 這段代碼指定了：
- 圖表類型（
type）為折線圖（line）； - 圖表名稱（
name）為「每月編輯數」，在提示框（tooltip）中顯示。其與legend中的數據數組（data）對應； - 圖表文本標籤（
label）對象，其中有四個鍵值對：標籤內容格式為數據值、與圖形元素的距離為0、文字塊背景色為透明、文字塊的內邊距為1； - 數據內容數組（
data）中包含三個對象，指定了單個數據項的數值（value），標籤（label）是否顯示（show）以及位置（position）； - 圖表標註（
markPoint）對象，包含一個數據數組（data），指定了標註出最大值點和最小值點； - 圖表標線（
markLine）對象，包含一個數據數組（data），指定了標註出平均值線。
- 圖表類型（
animationanimationanimation指定是否開啟動畫。
其他說明
- 若希望不顯示除最大、最小值之外其他數據的值，可考慮指定
xAxis的type為"category"，此時data中只需以列表形式（如[2, 3, 5, 7, 11, 13]）提供對應數據即可。修改方式可參考此條差異。[8] - 若希望不顯示圖表右上角的工具欄，將
toolbox及其下屬內容全部刪除即可。此外，若希望調整工具欄中的功能，可參考官方文檔。[9]
更改頁面內容類型
將編寫完成的頁面保存後需要將該頁面的類型更改為JSON，電腦版視圖下的具體操作步驟為：
- Vector皮膚下在頁面左欄找到「工具」，點擊「頁面信息」；MoeSkin皮膚下在底端工具欄點擊「頁面信息」；
- 找到「基本信息」表格中的「頁面內容類型」，點擊右側的「更改」；
- 在「新的內容模型」下拉列表中選擇「JSON」，之後點擊「更改」。
至此，該頁面的內容類型就變成了JSON，可以通過{{Echart}}調用了。
{{Echart}}模板的使用參見模板文檔，在此不再贅述。
頁面開頭的圖表即使用{{Echart|datapage=User:GuoPC/ECExample1|height=300}}進行渲染。
數據更新
作為「每月編輯歷史折線圖」，需要至少每月更新一次[來源請求]，如何在已有數據頁面的基礎上增添數據呢？需要修改的還是xAxis和series兩部分。假定2021年6月的編輯數為400。
xAxisxAxis
- 修改前
"xAxis": {
"data": [
"2021年3月",
"2021年4月",
"2021年5月"
]
}
- 修改後（第6行之後，注意第5行最後需加一個
,）
"xAxis": {
"data": [
"2021年3月",
"2021年4月",
"2021年5月",
"2021年6月"
]
}
seriesseries
- 修改前
"series": [
{
...,
"data": [
{
"value": 572,
"label": {
"show": false
}
},
{
"value": 312,
"label": {
"show": true,
"position": "bottom"
}
},
{
"value": 290,
"label": {
"show": false
}
}
],
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"markLine": {
"data": [
{
"type": "average",
"name": "平均值"
}
]
}
}
]
- 修改後（第24行之後，注意第23行最後需加一個
,）
"series": [
{
...,
"data": [
{
"value": 572,
"label": {
"show": false
}
},
{
"value": 312,
"label": {
"show": true,
"position": "bottom"
}
},
{
"value": 290,
"label": {
"show": false
}
},
{
"value": 400,
"label": {
"show": true,
"position": "bottom"
}
}
],
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"markLine": {
"data": [
{
"type": "average",
"name": "平均值"
}
]
}
}
]
更新之後的圖表如下：
{
"title": {
"text": "我的編輯歷史",
"subtext": "按月統計次數",
"subtextStyle": {
"color": "#333"
}
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross",
"animation": false
}
},
"toolbox": {
"show": true,
"feature": {
"dataZoom": {
"yAxisIndex": "none"
},
"dataView": {
"readOnly": true
},
"magicType": {
"type": [
"line",
"bar"
]
},
"restore": {},
"saveAsImage": {
"excludeComponents": [
"toolbox",
"dataZoom"
]
}
}
},
"axisPointer": {
"link": {
"xAxisIndex": "all"
}
},
"dataZoom": [
{
"type": "inside",
"xAxisIndex": [
0
],
"startValue": 0,
"end": 100
},
{
"show": true,
"xAxisIndex": [
0
],
"type": "slider",
"start": 0,
"end": 100
}
],
"legend": {
"data": [
"編輯次數"
]
},
"xAxis": {
"data": [
"2021年3月",
"2021年4月",
"2021年5月",
"2021年6月"
]
},
"yAxis": {},
"series": [
{
"name": "編輯次數",
"type": "line",
"label": {
"formatter": "{c}",
"distance": 0,
"backgroundColor": "transparent",
"padding": 1
},
"data": [
{
"value": 572,
"label": {
"show": false
}
},
{
"value": 312,
"label": {
"show": true,
"position": "bottom"
}
},
{
"value": 290,
"label": {
"show": false
}
},
{
"value": 400,
"label": {
"show": true
}
}
],
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
],
"silent": true
},
"markLine": {
"data": [
{
"type": "average",
"name": "平均值"
}
],
"silent": true
}
}
],
"animation": false
}圖表數據頁面：User:GuoPC/ECExample2
根據實際編輯數的不同，如果更新數據後最大或最小值有變，只要對label中show和position的值進行修改即可。
注釋
- ↑ Apache ECharts
- ↑ API: echartsInstance.setOption - Documentation - Apache ECharts
- ↑ 此處考慮到時區因素，位於起止日期間最前和最後8個小時的貢獻可能不會顯示。如果希望納入這些貢獻，需要調整起止日期。
- ↑
key: value的形式稱為鍵值對，其中key為鍵、value為值，鍵值對之間用,隔開。更多JSON相關內容在此不再贅述 - ↑ 5.0 5.1 5.2
setOption函數支持的所有鍵參見配置項 - Documentation - Apache ECharts - ↑ 此處提供用戶命名空間下「contributions」的搜索結果以供參考：「contributions」的搜索結果 - 萌娘百科
- ↑ 實際上因為圖表本身可以沿x軸縮放，且縮放後會根據當前縮放級別下顯示的數據重新尋找最大值與最小值並進行標記，所以此處只能保證在默認縮放級別下的美觀性。另可參考#其他說明中將修改橫軸為類目（category）類型的相關內容。
- ↑ 配置項: xAxis.data - Documentation - Apache ECharts
- ↑ 配置項: toolbox.feature - Documentation - Apache ECharts