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

Hello Alili | Front-end Engineer - WEB BANG! BANG!! BANG!!! Keep learning, keep blogging. Life goals, recent plans, today's tasks. 本文资源来源互联网，仅供学习研究使用，版权归该资源的合法拥有者所有， Hello Alili, Front-end Engineer, WEB BANG BANG BANG, Front-end, Front-end Blog, Web Development Blog, Front-end Modularization, Front-end Engineering, Front-end Data Monitoring, Performance Optimization, Web Development, Front-end, JavaScript, HTML5, CSS, Micro Frontend, Raspberry Pi, Front-end Development, Blockchain, Network, MongoDB, Vue.js, Angular.js, Node.js

Effect

Article Link:

https://alili.tech/en/archive/r5ibcpo557h/

# Latest Articles