Echartsの表示練習

綺麗なグラフをブログに乗せたくて、Echartsの練習をする。

（メモ）
下記をshortcodeとしてshortcodeフォルダに突っ込む必要がある

<!-- HTML Hugo Shortcode-->
<div id="echarts{{ .Get `height` }}" style="width: 100%;height: {{.Get `height`}}px;margin: 0 auto"></div>
<script src="https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts{{ .Get `height` }}'));
    // 指定图表的配置项和数据
    var option = {{ .Inner | safeJS }};
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

↓参考
https://alili.tech/archive/r5ibcpo557h/
https://discourse.gohugo.io/t/issue-encountered-when-embedding-echarts-into-hugo-site/32305

←おすすめVPN

qiu3/Echartsの表示練習