在写博客的过程中，有时候会需要绘制一些简单的统计图形，插入在正文中。图形所含数据不多，很轻量，所以，我不想用到 R 包 echarts4r，既然不需要 R 的绘图和计算功能，那么，我也不需要用 R Markdown 文档来写我的博客文章了，直接用 Markdown 这种纯文本格式。我试了 Chart.js （适合极简单的图形）和 Mermaid （画非统计图形合适）。最后，在体验 plotly（虽然慢点，但是统计功能还是非常强的） 之后，发现我的这个使用场景还是 Apache ECharts 比较好。
我的网站是用 Hugo 来渲染的，它通过自定义的 Shortcodes 可以引入外部的 JavaScript 库。 Hugo 有一些内建的 Shortcodes，比如插入图片、油管视频等。
来源：OpenAI DALL·E 3 模型生成
下面通过 Hugo 的 shortcodes 引入 echarts 绘图功能。ECharts 部分的代码复制自ECharts 官网的快速上手文档。
我是在写博客文章《搞物流的互联网公司》的过程中，发现我需要引入 echarts 的绘图功能的。场景是这样的，翻一翻上市公司的财报，把其中某个指标的数据找出来，挨个复制到我的文档里来。根据需要画一些可对比的趋势图、饼图。原文中的两张饼图用ECharts 重画如下。
京东集团 2018 vs 2023 年全年净收入的分布如下。
先想好要从财报中找什么数据，找到数据后想着要怎么呈现，再从 ECharts 示例库中把相关图形的代码复制到我的文档里来，最后，挨个复制财报的数据，粘贴到 ECharts 绘图代码中的对应位置。