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" >}}

参考

评论(没有评论)