让你的Hugo博客支持echarts图表

在之前hexo构建的博客里,有使用到图表,但是现在迁移到hugo之后,就没有相关的插件支持了.

所以自己动手丰衣足食.

在hugo中有支持一种特性叫做 Shortcodes.简单的来说就是一个可以传参的小模板.

创建Shortcodes

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

<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">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts{{ .Get `height` }}'));
    // 指定图表的配置项和数据
    var option = JSON.parse({{ .Inner }})
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

使用

在 Shortcodes 插入echarts的配置数据,这样你就可以再页面中看到一个完整的图表了

Alili | 前端大爆炸! - WEB BANG! BANG!! BANG!!! 前端大爆炸,一个前端技术博客.想到哪,学到哪,写到哪. 本文资源来源互联网,仅供学习研究使用,版权归该资源的合法拥有者所有, Alili, 前端大爆炸, WEB BANG BANG BANG, web前端博客, 前端模块化, 前端工程化, 前端数据监控, 性能优化, 网页制作, 前端, js, html5, css, 踩坑小报告, 微前端, 树莓派, 前端开发, 区块链, 网络, Mongodb, Vue.js, Angular.js, node.js

效果

本文链接:

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