如何在Hugo静态博客中嵌入echarts图表
source link: https://zeqiang.fun/post/techstack/echarts/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
数据可视化嵌入实验
为啥想做这个
想在hugo博客里写一些数据可视化的作品，感觉echarts的可交互性最好，故在网上搜索嵌入方法。看到最好的解决方案是前端大神Alili的一篇博文
具体实现方法
Hugo静态页面支持一种叫做Shortcodes的特性（or功能），是一个可以传参的小模板
1.创建shortcodes模板文件
在目录 ./themes/even/layouts/shortcodes下创建文件echarts.html，如果没有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>
2.在博客文章中的具体使用
在文章中任意位置插入如下代码，这里以echarts官方教程为例子。这里要注意字符型要加上双引号”“，如 “title”，而数值型不用。 特别注意：这里echarts标签<…>复制的时候与花括号{ }前后的空格要去掉
{{ <echarts height="500"> }}
{"title":{"text":"ECharts 入门示例"},"tooltip":{},"legend":{"data":["销量"]},"xAxis":{"data":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},"yAxis":{},"series":[{"name":"销量","type":"bar","data": [5, 20, 36, 10, 10, 20]}]}
{{ </echarts> }}Recommend
-
76
最近阿里正式开源的BizCharts图表库基于React技术栈，各个图表项皆采用了组件的形式，贴近React的使用特点。同时BizCharts基于G2进行封装，Bizcharts也继承了G2相关特性。公司目前统一使用的是ECharts图表库，下文将对3种图表库进行分析比...
-
33
ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。 使用 JavaScript 实现开源的可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏...
-
6
go1.16 版本已经 release 了，推出了一些新功能特性，其中有一个 embed 的新功能，通过 embed 可以将静态资源文件直接打包到二进制文件中，这样当我们部署 Web 应用的时候就特别方便了，只需要构建成一个二进制文件即可，以前也有一些第三方的...
-
8
使用Markdown撰写博客，并以静态页面形式发布。 选择hugo 现在jekyll似乎更加流行，但是jekyll是基于Ruby的，在windows下安装很繁琐。 而hugo是用go写的，windows版本只有一个exe，安装起来非常方便。 因此决定使用hugo作为站点生...
-
11
官网： https://echarts.apache.org/zh...配置文档：https://echarts.apache.org/z...
-
12
Vue封装Echarts图表准备工作在开始之前，我们先按照正常的组件注册流程，在项目 components 目录中新建一个名为 radar-chart 的组件，然后在一个 Demo 页面引入该...
-
4
将echarts生成的图表变为图片保存起来一：echartsecharts官网：
-
9
React Echarts 使用教程 - 如何在 React 中加入图表（内附数据看板实战搭建案例）stone前端工程师最近更新 202...
-
10
原文地址：码农在新加坡的个人博客 之前讲解了把hugo静态博客部署到Github Pages和Vercel上。由于最近活动腾讯云服务器打折，所以我花了58元买了一年的轻量级服务器，并准备把...
-
5
【笔记】在Hexo中渲染Echarts图表 2023-06-18 ...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK