an.rustfisher.com有很多內(nèi)容隅要，很多頁面。如果用一個樹狀圖把所有頁面展示出來會是什么效果攻晒？
第一時間想到了ECharts铸抑。
最后效果： https://an.rustfisher.com/an-tree.html
數(shù)據(jù)處理
數(shù)據(jù)來源于配置文件。我們只需要把內(nèi)容讀出來侄刽，整理成ECharts需要的格式并保存為文件执虹。
yml
Android站用的框架是Mkdocs，網(wǎng)址都設(shè)置在mkdocs.yml里唠梨。關(guān)鍵配置如下
nav:
- Android basic:
- 開始:
- 新建工程: android/startProject/start_new_project.md
- 使用Kotlin: android/startProject/as-use-kotlin.md
- Activity:
- Activity綜述: android/activity/overview.md
我們需要把這些數(shù)據(jù)讀出來袋励，弄成ECharts可以用的格式。
打開PyCharm当叭，用python來處理數(shù)據(jù)茬故。
python處理數(shù)據(jù)
我們使用3.7版本python。要讀取yml的內(nèi)容蚁鳖，不想用讀文本的方式一行行來讀磺芭，還得自己解析。
python中有個庫PyYAML專門用于讀取yml格式的數(shù)據(jù)醉箕。
在PyCharms里裝上這個包钾腺。用它來讀取yml里的數(shù)據(jù)徙垫。
import yaml
with open(md_file, encoding='utf8') as a_yaml_file:
# 解析yaml
yaml_data = yaml.load(a_yaml_file, Loader=yaml.FullLoader)
nav = yaml_data['nav']
ECharts需要的格式是name和children。同時可以添加別的字段放棒。
{
"name": "Android教程",
"children": [
{
"name": "Android basic",
"children": []
}]
}
讀取到的數(shù)據(jù)層級比較多姻报，用遞歸方法來處理它們。把所有的數(shù)據(jù)都遍歷一遍间螟，整理成需要的格式吴旋。
遞歸的時候，遇到數(shù)組厢破，則繼續(xù)遞歸荣瑟；遇到字符串，則表示可以拼接網(wǎng)址了摩泪。
完整腳本如下
import json
import os
import yaml
def gen_url_map(main_site, md_file):
with open(md_file, encoding='utf8') as a_yaml_file:
# 解析yaml
yaml_data = yaml.load(a_yaml_file, Loader=yaml.FullLoader)
nav = yaml_data['nav']
sorted_data = {"name": "Android教程", "children": [], "collapsed": False}
for big_dict in nav:
load_url(main_site, big_dict, sorted_data)
url_file = 'android-url-map.json'
if os.path.exists(url_file):
os.remove(url_file)
with open(url_file, 'w') as s:
s.write(str(json.dumps(sorted_data, ensure_ascii=False)))
def load_url(main_site, input_dict, res_data):
"""
遞歸處理數(shù)據(jù)
"""
for k1 in input_dict:
v1 = input_dict[k1]
if isinstance(v1, list):
item1 = {"name": k1, "children": []}
res_data['children'].append(item1)
for v1_child in v1:
load_url(main_site, v1_child, item1)
elif isinstance(v1, str):
# 此時已經(jīng)是url了
final_item = {"name": k1, "url": main_site + v1[0:-3]}
res_data['children'].append(final_item)
return final_item
if __name__ == '__main__':
print("生成android站的sitemap")
gen_url_map('https://www.an.rustfisher.com/',
'/Users/rustfisher/mkdocs.yml')
最后寫一個android-url-map.json文件笆焰。
制作網(wǎng)頁
經(jīng)過觀察，我們選用徑向樹狀圖（tree-radial）见坑。
查看ECharts的徑向樹狀圖使用示例仙辟，下載一個示例html，在它的基礎(chǔ)上修改鳄梅。
添加上jquery的引用叠国。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
修改要讀取的json文件名
$.getJSON('./android-url-map.json', function (data) { /* ... */ }
把前面得到的json文件和這個html文件放在同一層級，上傳服務(wù)器戴尸。
打開： https://an.rustfisher.com/an-tree.html 可以看到效果粟焊。
擴(kuò)大顯示范圍
這個時候的網(wǎng)頁體驗不是很好，頁面不夠大孙蒙，圖表超出上下范圍了项棠。可以給它添個豎直的滾動條overflow-y: scroll挎峦。
<html style="height: 100%; width: 100%; overflow-y: scroll;">
修改一下網(wǎng)頁的body香追。外層的container占100%寬高，里面的chartContainer給一個min-height: 1600px坦胶。
<body style="height: 100%; margin: 0; width: 100%;">
<div id="container" style="height: 100%; width: 100%;">
<div id="chartContainer" style="width: 100%; min-height: 1600px"></div>
</div>
script里加上對resize的監(jiān)聽
$(window).on('resize', function () {
if (myChart != null && myChart != undefined) {
myChart.resize();
}
});
這時再看瀏覽器的效果透典，圖表有了更多的空間顯示。
參考
- https://stackoverflow.com/questions/33454946/echarts-and-bootstrap-responsive-width
- https://stackoverflow.com/questions/12575251/why-is-my-page-not-scrollable
點擊打開頁面
默認(rèn)點擊效果是折疊和展開顿苇。對于最末尾的葉子節(jié)點峭咒，加一個點擊事件讓它打開相應(yīng)的界面。
myChart.on('click', function (params) {
if (params.data && params.data.url) {
window.open(params.data.url);
}
});
