本站页面（多半）转载自萌娘百科的同名页面，依CC BY-NC-SA 3.0引入，贡献者可以在历史页查询。
因各种原因页面内容可能和源页面有所出入，非本站特有页面内容请以萌娘百科为准。此外，因萌百的api限制，本站部分页面和图片同步自另一个镜像站。
置顶公告：【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好～！欢迎来到萌娘百科镜像站！如需查看或编辑，请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关，请注意分别。

用戶:GuoPC/編輯歷史的ECharts折線圖實現

萌娘百科，萬物皆可萌的百科全書！轉載請標註來源頁面的網頁連結，並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋
大萌字.svg
閱讀本用戶子頁面的任何人都可以參與編輯。
Emoji u1f613.svg
本頁的內容因筆者能力有限，可能存在部分難以理解的文字，歡迎了解相關內容的編輯者協助改善或在我的討論頁提出改進建議。
📈
本頁的部分內容基於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）：

準備數據

目前普遍採用手動統計的方式。即轉到您的貢獻頁面，選定好起止日期進行統計。當然，當數目較大時，可以通過複製當月的貢獻記錄，然後粘貼到可以顯示行數的文本編輯器（例如開啟狀態欄的Windows Notepad，whatever）以減少工作量。

頁面編寫

建議您使用諸如Visual Studio Code的代碼編輯器新建JSON文件進行編寫後再粘貼到您剛創建好的頁面。

數據的框架可能看起來長成這樣： 

{
    "title": {...},
    "tooltip": {...},
    "toolbox": {...},
    "axisPointer": {...},
    "dataZoom": [{...}],
    "legend": {...},
    "xAxis": {...},
    "yAxis": {...},
    "series": [{...}],
    "animation": false
}

最外側花括號中的鍵實際上是setOption函數支持的所有鍵。[3][4]下面僅根據上面的實例對這些鍵做具體介紹。

太多不看版

如果您只關注如何將每月的編輯數轉化為折線圖，那麼只要了解xAxis和series的一部分即可。其餘部分可參照官方文檔[4]或其他已經寫好的用戶處[5]查看。

xAxis
xAxis
xAxis即為x軸，您可以通過在其中添加data: []來指定x軸的數據。例如：
"xAxis": {
    "data": [
        "2021年3月",
        "2021年4月",
        "2021年5月"
    ]
}
這段代碼指定了x軸的數據為「2021年3月」「2021年4月」「2021年5月」，實際圖表中x軸就會有這三個值。
series
series
series指定圖表系列，大致結構為：
"series": [
    {
        ...,
        "data": [{"value": ..., "label": {...}}],
        "markPoint": {
            "data": [
                {
                    "type": "max",
                    "name": "最大值"
                },
                {
                    "type": "min",
                    "name": "最小值"
                }
            ]
        },
        "markLine": {
            "data": [
                {
                    "type": "average",
                    "name": "平均值"
                }
            ]
        }
    }
]
data中指定:
  1. 單個數據項的數值（value），您可以在這裡填入當月編輯數；
  2. 標籤（label）是否顯示（show），"show": true則顯示、"show": false則不顯示；
  3. 標籤位置（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。[6]

完整版

此章節介紹示例中涉及到的所有鍵。[4]

title
title
title為標題組件，包含主標題和副標題。例如：
"title": {
    "text": "我的编辑历史",
    "subtext": "按月统计次数",
    "subtextStyle": {
        "color": "#333"
    }
}
這段代碼指定了：
  1. 主標題（text）為「我的編輯歷史」；
  2. 副標題（subtext）為「按月統計次數」；
  3. 副標題樣式（subtextStyle）為對象，其中有一個鍵值對：文本顏色為#333。
tooltip
tooltip
tooltip為提示框組件。例如：
"tooltip": {
    "trigger": "axis",
    "axisPointer": {
        "type": "cross",
        "animation": false
    }
}
這段代碼指定了：
  1. 觸發類型（trigger）為坐標軸觸發（axis），主要在柱狀圖、折線圖等會使用類目軸的圖表中使用；
  2. 坐標軸指示器（axisPointer）對象，其中有兩個鍵值對：指示器類型為十字準星指示器、不開啟動畫。
toolbox
toolbox
toolbox為工具欄。例如：
"toolbox": {
    "show": true,
    "feature": {
        "dataZoom": {
            "yAxisIndex": "none"
        },
        "dataView": {
            "readOnly": true
        },
        "magicType": {
            "type": ["line", "bar"]
        },
        "restore": {},
        "saveAsImage": {
            "excludeComponents": ["toolbox", "dataZoom"]
        }
    }
}
這段代碼指定了：
  1. 顯示工具欄組件（show）；
  2. 各工具配置項（feature）對象，其中有五個鍵值對：
    1. 數據區域縮放（dataZoom）對象，其中有一個鍵值對：y軸索引為空，即不控制任何y軸；
    2. 數據視圖（dataView）對象，其中有一個鍵值對：只讀，即不可編輯；
    3. 動態類型（magicType）對象，其中有一個鍵值對：啟用的動態類型為折線圖和柱狀圖；
    4. 配置項還原（restore）為空；
    5. 保存為圖片（saveAsImage）對象，其中有一個鍵值對：忽略的組件列表為工具欄（toolbox）和數據區域縮放組件（dataZoom）。
axisPointer
axisPointer
axisPointer為坐標軸指示器。例如：
"axisPointer": {
    "link": {
        "xAxisIndex": "all"
    }
}
這段代碼指定了：
  1. 聯動（link）對象，其中有一個鍵值對：所有的x軸進行聯動。
dataZoom
dataZoom
dataZoom為數據區域縮放組件。例如：
"dataZoom": [
    {
        "type": "inside",
        "xAxisIndex": [0],
        "startValue": 0,
        "end": 100
    },
    {
        "show": true,
        "xAxisIndex": [0],
        "type": "slider",
        "start": 0,
        "end": 100
    }
]
這段代碼指定了兩個對象。其中第一個對象指定了：
  1. 數據區域縮放組件類型（type）為內置型（inside），即可以通過鼠標拖拽和滾輪滾動來縮放坐標系；
  2. 控制的x軸（xAxisIndex）為第一個x軸；
  3. 數據區域的起始值（startValue）為0；
  4. 數據區域的結束百分比（end）為100%。
第二個對象指定了：
  1. 數據區域縮放組件類型（type）為滑動條型（slider），即展示數據縮略圖；
  2. 顯示該滑動條組件（show）；
  3. 控制的x軸（xAxisIndex）為第一個x軸；
  4. 數據區域的起始百分比（start）為0%；
  5. 數據區域的結束百分比（end）為100%。
legend
legend
legend為圖例組件。例如：
"legend": {
    "data": [
        "编辑次数"
    ]
}
這段代碼指定了：
  1. 圖例的數據數組（data）為一個字符串「編輯次數」。其與series中的圖表名稱（name）對應。
xAxis
xAxis
xAxis為直角坐標系的x軸。例如：
"xAxis": {
    "data": [
        "2021年3月",
        "2021年4月",
        "2021年5月"
    ]
}
這段代碼指定了：
  1. x軸的數據數組（data）為三個字符串。
yAxis
yAxis
yAxis為直角坐標系的y軸。
series
series
series指定圖表系列。例如：
"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": "平均值"
                }
            ]
        }
    }
]
這段代碼指定了：
  1. 圖表類型（type）為折線圖（line）；
  2. 圖表名稱（name）為「每月編輯數」，在提示框（tooltip）中顯示。其與legend中的數據數組（data）對應；
  3. 圖表文本標籤（label）對象，其中有四個鍵值對：標籤內容格式為數據值、與圖形元素的距離為0、文字塊背景色為透明、文字塊的內邊距為1；
  4. 數據內容數組（data）中包含三個對象，指定了單個數據項的數值（value），標籤（label）是否顯示（show）以及位置（position）；
  5. 圖表標註（markPoint）對象，包含一個數據數組（data），指定了標註出最大值點和最小值點；
  6. 圖表標線（markLine）對象，包含一個數據數組（data），指定了標註出平均值線。
animation
animation
animation指定是否開啟動畫。

其他說明

  • 若希望不顯示除最大、最小值之外其他數據的值，可考慮指定xAxis的type為"category"，此時data中只需以列表形式（如[2, 3, 5, 7, 11, 13]）提供對應數據即可。修改方式可參考此條差異。[7]
  • 若希望不顯示圖表右上角的工具欄，將toolbox及其下屬內容全部刪除即可。此外，若希望調整工具欄中的功能，可參考官方文檔。[8]

更改頁面內容類型

將編寫完成的頁面保存後需要將該頁面的類型更改為JSON，電腦版視圖下的具體操作步驟為：

  1. Vector皮膚下在頁面左欄找到「工具」，點擊「頁面信息」；MoeSkin皮膚下在底端工具欄點擊「頁面信息」；
  2. 找到「基本信息」表格中的「頁面內容類型」，點擊右側的「更改」；
  3. 在「新的內容模型」下拉列表中選擇「JSON」，之後點擊「更改」。

至此，該頁面的內容類型就變成了JSON，可以通過{{Echart}}調用了。

{{Echart}}模板的使用參見模板文檔，在此不再贅述。

頁面開頭的圖表即使用{{Echart|datapage=User:GuoPC/ECExample1|height=300}}進行渲染。

數據更新

作為「每月編輯歷史折線圖」，需要至少每月更新一次[來源請求]，如何在已有數據頁面的基礎上增添數據呢？需要修改的還是xAxis和series兩部分。假定2021年6月的編輯數為400。

xAxis
xAxis
修改前
"xAxis": {
    "data": [
        "2021年3月",
        "2021年4月",
        "2021年5月"
    ]
}
修改後（第6行之後，注意第5行最後需加一個,）
"xAxis": {
    "data": [
        "2021年3月",
        "2021年4月",
        "2021年5月",
        "2021年6月"
    ]
}
series
series
修改前
"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的值進行修改即可。

注釋

  1. ↑ Apache ECharts
  2. ↑ API: echartsInstance.setOption - Documentation - Apache ECharts
  3. ↑ key: value的形式稱為鍵值對，其中key為鍵、value為值，鍵值對之間用,隔開。更多JSON相關內容在此不再贅述
  4. ↑ 4.0 4.1 4.2 setOption函數支持的所有鍵參見配置項 - Documentation - Apache ECharts
  5. ↑ 此處提供用戶名字空間下「contributions」的搜索結果以供參考：「contributions」的搜索結果 - 萌娘百科
  6. ↑ 實際上因為圖表本身可以沿x軸縮放，且縮放後會根據當前縮放級別下顯示的數據重新尋找最大值與最小值並進行標記，所以此處只能保證在默認縮放級別下的美觀性。另可參考#其他說明中將修改橫軸為類目（category）類型的相關內容。
  7. ↑ 配置項: xAxis.data - Documentation - Apache ECharts
  8. ↑ 配置項: toolbox.feature - Documentation - Apache ECharts
取自「https://moegirl.uk/index.php?title=User:GuoPC/编辑历史的ECharts折线图实现&oldid=1209183」