先看集成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文件
<html>
<body>
...
{{ partial "echarts/assets/script" . }}
</body>
</html>
使用方法
参考模块文档地址：Hugo ECharts Module ，有两种使用方式
- Code Block
- Shortcode
文章最前面的图表是采用Code Block方式生成的，具体的markdown内容如下：
{
"tooltip": {
"trigger": "axis",
"show": true
},
"xAxis": {
"type": "category",
"data": [
"01-02",
"01-04",
"01-06",
"01-07",
"01-10",
"01-13",
"01-21",
"01-23",
"01-25",
"01-27",
"01-28",
"02-17",
"02-20",
"02-23",
"02-25",
"02-28",
"03-03",
"03-06",
"03-08",
"03-10",
"03-12",
"03-14",
"03-17",
"03-21",
"03-22",
"03-24",
"03-29",
"03-31",
"04-08",
"04-10",
"04-21",
"04-24",
"04-26",
"04-27",
"04-30",
"05-02",
"05-04",
"05-05",
"05-07",
"05-09",
"05-10",
"05-12",
"05-15",
"05-17",
"05-19",
"05-21",
"05-23",
"05-25",
"05-27",
"05-30",
"06-01",
"06-03",
"06-05",
"06-07",
"06-08"
],
"name": "日期",
"nameLocation": "center",
"nameGap": 30,
"nameTextStyle": {
"color": "#6B9CF0"
},
"axisLabel": {
"textStyle": {
"color": "#6B9CF0"
}
},
"axisTick": {
"lineStyle": {
"color": "#6B9CF0"
}
},
"axisLine": {
"lineStyle": {
"color": "#6B9CF0"
}
}
},
"yAxis": {
"name": "平均心率(bpm)",
"type": "value",
"scale": true,
"splitLine": false,
"nameLocation": "center",
"nameRotate": "90",
"nameGap": 30,
"nameTextStyle": {
"color": "#E49A52"
},
"axisLabel": {
"textStyle": {
"color": "#E49A52"
}
}
},
"series": [
{
"name": "平均心率(bpm)",
"data": [
156.0,
144.0,
142.0,
143.0,
145.0,
142.0,
150.0,
147.0,
152.0,
148.0,
148.0,
151.0,
160.0,
147.0,
148.0,
150.0,
148.0,
144.0,
147.0,
143.0,
145.0,
143.0,
151.0,
157.0,
145.0,
140.0,
145.0,
144.0,
144.0,
159.0,
141.0,
165.0,
144.0,
145.0,
143.0,
138.0,
139.0,
141.0,
158.0,
145.0,
145.0,
161.0,
143.0,
145.0,
148.0,
145.0,
156.0,
148.0,
147.0,
144.0,
151.0,
147.0,
165.0,
147.0,
147.0
],
"itemStyle": {
"color": "#E49A52"
},
"type": "line"
}
]
}
上面的配置内容没有找到模块插件的配置示例展示效果，所以把头部设置成了json ，需要在markdown内容头部指定渲染引擎，：
echarts {height=300}
具体在调整ECharts图的效果时，可以参考ECharts的官网示例，格式内容调整也可以在示例的在线模式调试，调试完成之后把内容拷贝到code block。
ECharts的官网示例
EChart配置项目手册
样式简单说明：
"yAxis": {
"name": "平均心率(bpm)",
"type": "value",
"scale": true,
"splitLine": false,
"nameLocation": "center",
"nameRotate": "90",
"nameGap": 30,
"nameTextStyle": {
"color": "#E49A52"
},
"axisLabel": {
"textStyle": {
"color": "#E49A52"
}
}
},
- name：y轴的名称，还可以设置双y轴
- scale：数据刻度自适应，最小刻度可以从数据最小值开始，如果不设置，示例的心率数据就是从0开始
- splitLine：横向刻度线不显示
- nameLocation：轴名称居中显示
- nameRotate：轴名称旋转90度，相当于竖排文字
- nameGap：设置坐标轴名称与轴线之间的距离
- nameTextStyle：坐标轴名称样式设置
- axisLabel：坐标轴刻度的文本样式
如果不知道怎么调整样式，可以先百度搜索，例如ECharts设置双坐标轴，然后再参考EChart配置项目手册 。