ECharts on ByteJog

Hugo集成ECharts支持鼠标点击链接

Sun, 15 Sep 2024 14:22:33 +0800

先看看效果展示，实现鼠标点击提示框链接进入跑步详情页面，整体效果跑步总结。

为了实现提示框可以点击，来回折腾浪费了很长时间，记录下来以备不时之需。
在ECharts的示例编辑里的tooltip配置项内容：

"tooltip": {
  "triggerOn": "click",
  "enterable": true,
  "formatter":function (params) {
    if (params.value[1] <= 3) {
      return '';
      } else {
        return (
          '<a href="/posts/run/' + params.value[2] + '/" target="_blank\">' +
          params.value[0].slice(-5) +
          '</a> <br>' +
          Number(params.value[1]).toFixed(2) +
          'km '
          );
      }
  }
}

Hugo编译时报如下错误：

Error: error building site: "xx/content/posts/run/run_stats.md:135:1": "xx/layouts/_default/_markup/render-codeblock-echarts.html:6:37": execute of template failed: template: _default/_markup/render-codeblock-echarts.html:6:37: executing "_default/_markup/render-codeblock-echarts.html" at <transform.Unmarshal>: error calling Unmarshal: "_stream.json:5:1": unmarshal failed: invalid character 'u' in literal false (expecting 'a')

Hugo编译时会使用transform.Unmarshal校验json内容，formmater的参数内容不符合规范内容。

ECharts 通过组件 visualMap 指定渲染数据某一维度

Sun, 15 Sep 2024 13:19:57 +0800

先看看效果展示，将原来markdown的表格样式展示修改为热力图展示，整体效果跑步总结。

最初我的需求是，将一年的跑步数据能够像github的提交贡献图进行展示。

日历可以使用ECharts的日历热力图
安装跑步距离显示为不同颜色，与示例的颜色渐变有所区别
可以通过跑步数据进入跑步详情页面

下来说一下我碰到的几个问题。

热力图支持

由于原来使用的是echarts在线定制模式下载的js文件，进入ECharts在线定制。

图表中增加选择热力图Heatmap
坐标系增加选择日历Calendar
组件增加选择视觉映射VisualMap

颜色分段显示

"visualMap": {
  "show": false,
  "type": "piecewise",
  "pieces": [
    { "gte": 15, "color": "#E49A52" },
    { "gte": 10, "lt": 15, "color": "#83C67B" },
    { "gte": 3, "lt": 10, "color": "#6B9CF0" },
    { "lt": 3, "color": "transparent" }
  ]
}

type参数设置为piecewise，分段型视觉映射组件
pieces参数可以使用 lt（小于，less than），gt（大于，greater than），lte（小于等于 less than or equals），gte（大于等于，greater than or equals）来表达边界

按照指定维度渲染图形

在ECharts在线示例编辑器中，测试没有问题，后面程序自动生成了结果集，结果集示例如下：

Hugo集成ECharts生成心仪的图表

Sat, 08 Jun 2024 20:31:15 +0800

先看集成ECharts的图表展示效果，整体文章效果可以跳转到跑步总结：

ECharts模块安装

模块GitHub地址：hugomods / echarts
ECharts地址：ECharts Dist

在使用说明提到的安装使用说明，没有成功，可能是我的使用方式不对，一致没有出来效果，后面安装方式采用之前博客里安装主题的方式，如果按照我提供的方式进行，建议阅读 Hugo个人博客搭建。

在GitHub下载echarts模块的最新程序包，包的结构如下：

echarts
├── assets           # TypeScrpt/JS资源
│   └── mods
│       └── echarts
├── layouts          # 站点样式
│   ├── _default
│   ├── partials
│   └── shortcodes
└── ……               # 其他文件

从上面提供的第2个链接下载echarts.js放到assets/mods/echarts 。

如需要加速echarts.js的加载速度，可以在ECharts在线定制，可以减小JS文件大小，加速加载速度。

将上面的assets、layouts 目录中文件拷贝到博客相应的目录，其他模块的文件可以忽略，博客目录参考如下：

bytejog
├── archetypes       # 站点文章模板
│   └── default.md
├── assets           # 需要被处理的资源 (SCSS、TypeScrpt 等)
├── content          # 站点文章
├── data             # 配置文件
├── hugo.yaml        # 站点配置文件
├── i18n             # 国际化文件
├── layouts          # 站点样式
├── static           # 静态资源 (图片、CSS、JavaScript 等)
└── themes           # 主题

修改layout/_default/baseof.html文件