ECharts

先看看效果展示，实现鼠标点击提示框链接进入跑步详情页面，整体效果 跑步总结。 为了实现提示框可以点击，来回折腾浪费了很长时间，记录下来以备不时之需。 在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的参数内容不符合规范内容。 ...

先看看效果展示，将原来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在线示例编辑器中，测试没有问题，后面程序自动生成了结果集，结果集示例如下： ...

先看集成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文件 ...