如何使用ECharts加载JSON数据生成X轴为国家的柱状图

你提供的原始数据中存在同一国家对应多条amount记录的情况，需要先对数据做分组聚合，再传入ECharts配置项，具体实现步骤如下：

• 准备ECharts挂载的DOM容器，必须为容器设置明确的宽高
• 遍历原始JSON数据，按country字段分组，对同国家的amount值求和，拆分出X轴的国家类目数组、Y轴的统计值数组
• 初始化ECharts实例，传入对应配置完成渲染

完整实现代码 #

<!-- 提前在项目中引入ECharts依赖，保证echarts全局变量可访问 -->
<!-- 图表容器 -->
<div id="countryBar" style="width: 700px; height: 450px; margin: 20px;"></div>

<script>
// 原始JSON数据
const rawData = [
  {"amount":0,"country":"Australia","year":"2014"},
  {"amount":20,"country":"UK","year":"2011"},
  {"amount":10,"country":"Australia","year":"2014"},
  {"amount":43,"country":"UK","year":"2014"}
];

// 按国家聚合统计amount总和
const aggregateMap = {};
rawData.forEach(item => {
  aggregateMap[item.country] = (aggregateMap[item.country] || 0) + item.amount;
});

// 拆分X轴、Y轴数据
const xCountries = Object.keys(aggregateMap);
const yValues = Object.values(aggregateMap);

// 初始化图表实例
const chart = echarts.init(document.getElementById('countryBar'));

// 图表配置
const option = {
  title: {text: '各国数据统计'},
  tooltip: {trigger: 'axis'},
  xAxis: {
    type: 'category',
    name: '国家',
    data: xCountries
  },
  yAxis: {
    type: 'value',
    name: '统计值'
  },
  series: [
    {
      name: '总量',
      type: 'bar',
      data: yValues,
      barWidth: '40%'
    }
  ]
};

// 渲染图表
chart.setOption(option);

// 可选：监听窗口变化实现图表自适应
window.addEventListener('resize', () => chart.resize());
</script>

效果说明 #

• 聚合后X轴会展示Australia、UK两个类目，对应的Y轴数值分别为10、63
• 如果需要按年份拆分展示多组柱子，只需要调整聚合逻辑，按year字段拆分多个series项即可
• 柱子颜色、宽度、标签等样式都可以在series配置项中按需调整

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