基于数组长度动态创建ECharts饼图的实现方法

这问题我做数据可视化时也碰到过，核心思路其实很简单：遍历你的query_result数据数组，动态生成图表容器并逐个初始化ECharts实例。不管数组长度怎么变，都能自动适配生成对应数量的饼图。我给你拆解具体步骤和可直接运行的代码示例：

核心步骤 #

1. 准备父容器：先在页面里放一个用来承载所有饼图的父容器，方便统一管理布局。
2. 动态生成饼图容器：遍历数据数组，为每一项创建独立的DOM容器（比如<div>），并添加到父容器中，每个容器设置唯一标识（比如ID）。
3. 逐个初始化ECharts：针对每个动态生成的容器，初始化ECharts实例，并用当前数组项的数据配置饼图的option。
4. 可选优化：给每个饼图添加标识（比如请求ID、时间），方便区分不同数据对应的图表；添加响应式处理，适配窗口大小变化。

完整代码示例 #

HTML部分 #

<!-- 父容器，用flex布局实现饼图自动换行，可根据需求调整样式 -->
<div id="charts-container" style="display: flex; flex-wrap: wrap; gap: 20px; padding: 20px;"></div>

JavaScript部分 #

// 你的数据源（如果是异步获取的，要确保数据返回后再执行后续代码）
const query_result = [
  { "request_id": "88f9f19a-eb25-4505-8482-c0a59d97a0da", "query_time": "2022-06-29T12:14:13.684Z", "query_result": 35, "query_total": 150 },
  { "request_id": "08c8736e-1e3d-4bd1-a041-1e31a1467f38", "query_time": "2022-06-29T12:14:13.684Z", "query_total": 100, "query_result": 60 },
  { "request_id": "b310641a-a415-41e4-9516-821d1956dd79", "query_time": "2022-06-29T12:14:13.684Z", "query_result": 20, "query_total": 100 }
];

// 获取父容器
const parentContainer = document.getElementById('charts-container');

// 遍历数据，动态创建饼图
query_result.forEach((item, index) => {
  // 1. 创建单个饼图的DOM容器
  const chartWrapper = document.createElement('div');
  // 设置唯一ID，确保每个容器可被单独选中
  chartWrapper.id = `pie-chart-${index}`;
  // 设置饼图容器的基础样式（宽高可根据需求调整）
  chartWrapper.style.width = '300px';
  chartWrapper.style.height = '300px';
  chartWrapper.style.border = '1px solid #eee';
  chartWrapper.style.borderRadius = '8px';
  chartWrapper.style.padding = '10px';
  // 将容器添加到父容器中
  parentContainer.appendChild(chartWrapper);

  // 2. 初始化ECharts实例
  const chartInstance = echarts.init(document.getElementById(`pie-chart-${index}`));

  // 3. 配置当前饼图的参数
  const chartOption = {
    // 标题：显示当前请求的标识（截取部分ID避免过长）
    title: {
      text: `Request: ${item.request_id.substring(0, 8)}...`,
      left: 'center',
      textStyle: { fontSize: 12 }
    },
    // 鼠标悬浮提示
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    // 饼图系列配置
    series: [
      {
        name: 'Query Results',
        type: 'pie',
        radius: ['40%', '70%'], // 环形饼图的内外半径
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        // 饼图数据：基于当前项的query_result和剩余数量
        data: [
          { value: item.query_result, name: 'Success' },
          { value: item.query_total - item.query_result, name: 'Total - Success' }
        ]
      }
    ]
  };

  // 4. 渲染图表
  chartInstance.setOption(chartOption);

  // 可选：添加窗口 resize 时的响应式调整
  window.addEventListener('resize', () => {
    chartInstance.resize();
  });
});

关键细节说明 #

• 动态容器唯一标识：用数组的index拼接ID，确保每个饼图容器不重复，避免ECharts初始化时出错。
• 独立配置项：每个饼图的option都是基于当前数组项生成的，完全独立，不会互相影响。
• 布局灵活调整：父容器的flex布局可以让饼图自动换行，你也可以换成网格布局（display: grid）来实现更规整的排列。
• 异步数据适配：如果你的query_result是通过接口异步获取的，只需把遍历代码放在接口请求成功的回调函数里，确保数据存在后再执行即可。

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