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

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

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

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

热力图支持

由于原来使用的是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在线示例编辑器中，测试没有问题，后面程序自动生成了结果集，结果集示例如下：

[
  ["2024-01-01", 0, ""], 
  ["2024-01-02", 7.56924, "20240102_1704121101000"], 
  ["2024-01-03", 0, ""], 
  ["2024-01-04", 7.58622, "20240104_1704293963000"],
  ...
]

修改了series的data参数值后，显示的图形为一片空白。尝试修改各种参数都没有能达到效果。后面终于找到visualMap的dimension参数。
指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组，例如：

[
    [12, 23, 43],
    [12, 23, 43],
    [43, 545, 65],
    [92, 23, 33]
]

其中每个列是一个维度，即 dimension。 例如 dimension 为 1 时，取第二列（即 23，23，545，23），映射到视觉元素上。
默认取 data 中最后一个维度。

修改后的visualMap配置项：

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

点击跳转到跑步详情页面

通过提示框配置进行点击：

"tooltip": {
  "triggerOn": "click",
  "enterable": true,
  "formatter":"function (params) {\n        if (params.value[1] <= 3) {\n          return '';\n        } else {\n          return (\n            '<a href=\"/posts/run/' + params.value[2] + '/\" target=\"_blank\">' +\n            params.value[0].slice(-5) +\n            '</a> <br>' +\n            Number(params.value[1]).toFixed(2) +\n            'km '\n          );\n        }\n      }"
}
  • triggerOn参数设置为click，默认的参数为mousemove，鼠标移动就消失了，点不到
  • enterable参数设置为true，鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
  • formatter参数，函数的字符串内容，Hugo编译时不能正常包含函数的json内容。

点击跳转需要配合 Hugo集成ECharts点击链接 进行相关配置