hugo中使用echarts

hugo Shortcodes: 可以传参的小模板

创建 ./layouts/Shortcodes/ec_kline.html文件

<div id="ec_kline{{ .Get `kline_id` }}" style="height: 600px;"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
    var jf = "/" + {{ .Page.Dir }}.replace(/\\/g, "/") + {{ .Get `jsonFile` }};

    $.getJSON(jf, "", function (data) {
        var dom = document.getElementById("ec_kline{{ .Get `kline_id` }}");
        var myChart = echarts.init(dom);
        var option;
        option = data;
        if (option && typeof option === 'object') {
            myChart.setOption(option);
            setTimeout(function () {
                window.onresize = function () {
                    myChart.resize();
                }
            }, 200)
        }
    });

</script>

test.json 文件:

{
    "xAxis": {
        "data": ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"]
    },
    "yAxis": {},
    "series": [{
        "type": "k",
        "data": [
            [20, 34, 10, 38],
            [40, 35, 30, 50],
            [31, 38, 33, 44],
            [38, 15, 5, 42]
        ]
    }]
}

markdown 文件中使用(注意去掉<>两侧的空格),需要提供 div 的 id 和 json 文件的名字:

{{ < ec_kline kline_id="test1" jsonFile="test.json" > }}
{{ < ec_kline kline_id="test2" jsonFile="test.json" > }}

效果:

{{< ec_kline kline_id="test1" jsonFile="test.json" >}}


{{< ec_kline kline_id="test2" jsonFile="test.json" >}}

参考

© Licensed under CC BY-NC-SA 4.0

我向星星许了个愿。我并不是真的相信它,但是反正也是免费的,而且也没有证据证明它不灵。—— 加菲猫

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!