Make Your Hugo Blog Support ECharts Charts

0
Hugo

In previously hexo built blog, had used charts, but now after migrating to hugo, there’s no related plugin support.

So do it yourself, be self-sufficient.

In hugo there’s a feature called Shortcodes. Simply put it’s a small template that can pass parameters.

Create Shortcodes

Create ./layouts/Shortcodes/echarts.html file

<div id="echarts{{ .Get `height` }}" style="width: 100%;height: {{.Get `height`}}px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.common.min.js"></script>
<script type="text/javascript">
    // Based on prepared dom, initialize echarts instance
    var myChart = echarts.init(document.getElementById('echarts{{ .Get `height` }}'));
    // Specify chart configuration items and data
    var option = JSON.parse({{ .Inner }})
    // Use just specified configuration items and data to display chart.
    myChart.setOption(option);
</script>

Usage

Insert echarts configuration data in Shortcodes, this way you can see a complete chart in the page

做时间的朋友，长期主义，记录成长与思考 本文资源来源互联网，仅供学习研究使用，版权归该资源的合法拥有者所有，

Effect

Article Link:

/en/archive/make-your-hugo-blog-support-echarts-charts/

# Related Articles