玩转博客Hugo(四) 嵌入Echarts 树图

概述

这几天非常忙,几乎在公司里面住了10天没有回家,也算是一个完美成绩,终于可以闲下来写点东西了,之前看到有人留言说想知道怎么在博客里面加Echarts,说实话,我专业不是html不是css 也不是js,都是抄来得,这里看一点哪里看一点,也搞了好久,最终算是弄出点东西出来了,之前也打算要单独记录一下的,所以今天就花点时间来总结一下吧 。

修改主题文件

导入需要的库

其实这个只要百度Echarts 进去百度里面直接下现成的代码就好了,但是百度下载下来的代码会提示你未授权之类之类的,实际上那都没有用,只不过百度下载的代码里面引入了地图的库,所以需要授权,我们画树图是不需要的,只引入我们需要的就好了。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

当然你也可以下载上面文件到本地,本地引入即可:

<script type="text/javascript" src="/style/js/echarts.min.js"></script>

给树图找一个位置

Echarts都是js的一些库函数,你需要再你的html里面给树图找一个合适的位置,如下所示:

 <div id="desk_app" style="height:600px;width:100%;"></div>

把数据导入到主题中去

这样的树图我们肯定是随时修改和添加的,所以我们必须要弄成可配置的,我的想法是直接弄到对应页面的md文件中去,这样我可以在对应文件的头部配置参数里面添加项就可以了 。

var data = [];
{{ range .Params.desk_app }}
    data.push({ name: "{{.name}}", value: "{{.ID}}", sj: "{{.parent}}", url: "{{.url}}", isjump:     {{.isjump }}});
{{ end }}

上面的代码我们只是把数据循环存储到js的一个数组里面去了,但是echart不能识别,所以我们要根据数组特征echart可以识别的数据。

  /**2.数据处理成层级关系的数据***/
    function transData(a, idStr, pidStr, childrenStr) {
        var r = [], hash = {}, id = idStr, pid = pidStr, children = childrenStr, i = 0, j = 0, len = a.length;
        for (; i < len; i++) {
            hash[a[i][id]] = a[i];
        }
        for (; j < len; j++) {
            var aVal = a[j], hashVP = hash[aVal[pid]];
            if (hashVP) {
                !hashVP[children] && (hashVP[children] = []);
                hashVP[children].push(aVal);
            } else {
                r.push(aVal);
            }
        }
        return r;
    }

绘制树图

下面我们就可以把树图绘制出来了

function drawTree(treeData,div) {
        var myChart = echarts.init(document.getElementById(div));//div元素节点的对象
        myChart.setOption({
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [{
                type: 'tree',
                name: 'TREE_ECHARTS',
                data: treeData,
                top: '2%',
                left: '10%',
                bottom: '2%',
                right: '40%',
                symbolSize: 10,
                lineStyle: {
                    width : 2,
                    curveness :0.5,
                    },
                label: {
                    normal: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                    }
                },
                leaves: {
                    label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left',
                            width:'100%',
                    }
                },
                expandAndCollapse: true,
                initialTreeDepth: 3  //展示层级数,默认是2
            }]
        });

树绑定事件

中间节点的点击事件

myChart.on('click', function (params) {
            var name = params.data.name;//点击的节点的name
            var value = params.data.value;//点击的节点的value
            var url = params.data.url;//跳转的URL
            var isjump = Boolean(params.data.isjump);

            clickNode(name, value, url, isjump);


        });

叶子节点的点击事件

 function clickNode(name, value, url, isjump) {
        console.log(isjump);
        if (isjump) {
            window.location.href = url;
        }

    }

载入页面绘制树图

    window.onresize = function () {
        window.location.reload();
    }

添加配置文件

1、在content下面新建.md文件,头部如下所示:

title: '知识结构'
date: 2018-08-04 21:15:25
type: Knowledge
published: true
hideInList: false
isTop: false

注意这里的type就是你主题里面对应的html文件名字。
2、 添加树的内容,根据ID来区分是根节点还是叶子节点。

desk_app: 
- url: "/"
  name: "上位机"
  ID: "01"
  parent: "-"
  isjump: false 
- url: "/"
  name: "C#语言开发"
  ID: "0101"
  parent: "01"
  isjump: false 

上面的参数分别如下:

url:跳转的页面,isjump设置为false时无效 。
ID:用来区分节点的层级
parent:节点的父节点,-表示根节点。
isjump:单击后是否跳转,只有叶子节点设置为true,其他的均为false。

如果这篇文章对您很有帮助,不妨
----- 本文结束 ❤ 感谢您的阅读 ----