如何通过Hugo短代码加载外部数据生成数据可视化？

Hugo原生不支持数据可视化，但DoIt主题通过集成ECharts短代码可以实现该功能。默认做法是直接在短代码中嵌入JSON/YAML/TOML格式的配置与数据，但若想从外部CSV或JSON文件加载数据生成可视化，可按以下两种方式实现：

一、从外部JSON文件加载数据 #

1. 放置数据文件：将你的input.json文件放在Hugo项目的static/data/目录下（Hugo会将static目录下的文件原样部署，可通过/data/input.json访问该文件）。
2. 编写ECharts短代码：在Markdown文章中使用echarts短代码，通过前端JavaScript的fetch方法加载数据并动态生成图表配置：

{{< echarts >}}
fetch('/data/input.json')
  .then(res => res.json())
  .then(data => {
    // 提取分类与数值数据
    const categories = data.map(item => item.category);
    const values = data.map(item => item.value);
    
    // 初始化ECharts实例
    const chart = echarts.init(document.currentScript.parentNode);
    
    // 配置图表
    const option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: categories
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: values,
          type: 'line',
          areaStyle: {}
        }
      ]
    };
    
    // 渲染图表并监听窗口 resize
    chart.setOption(option);
    window.addEventListener('resize', () => chart.resize());
  });
{{< /echarts >}}

二、从外部CSV文件加载数据 #

CSV文件需要先解析为结构化数据，以下是实现步骤：

1. 放置数据文件：将input.csv文件同样放在static/data/目录下。
2. 编写ECharts短代码：在短代码中实现简单的CSV解析逻辑，再加载数据生成图表：

{{< echarts >}}
// 简易CSV解析函数，处理基础格式的CSV
function parseCSV(csv) {
  const lines = csv.split('\n').filter(line => line.trim());
  const headers = lines[0].split(',');
  return lines.slice(1).map(line => {
    const vals = line.split(',');
    return headers.reduce((obj, key, idx) => {
      obj[key] = isNaN(vals[idx]) ? vals[idx] : parseFloat(vals[idx]);
      return obj;
    }, {});
  });
}

fetch('/data/input.csv')
  .then(res => res.text())
  .then(csvText => {
    const data = parseCSV(csvText);
    const categories = data.map(item => item.category);
    const values = data.map(item => item.value);
    
    const chart = echarts.init(document.currentScript.parentNode);
    const option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: categories
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: values,
          type: 'line',
          areaStyle: {}
        }
      ]
    };
    
    chart.setOption(option);
    window.addEventListener('resize', () => chart.resize());
  });
{{< /echarts >}}

注意事项 #

• 若你的站点部署在子路径下，需调整fetch中的URL（例如/blog/data/input.json），确保能正确访问数据文件。
• 如需处理复杂格式的CSV（如含引号的字段、换行符），可引入第三方解析库（如Papa Parse），可在站点自定义JS中全局引入，或在短代码内通过<script>标签临时引入。

内容的提问来源于stack exchange，提问作者crocefisso