Echarts饼图怎样实现多级联动

发布时间：2025-04-14 23:59:41 作者：小樊
来源：亿速云阅读：135

ECharts 饼图实现多级联动可以通过使用多个饼图组件，并通过监听事件来更新其他饼图的数据。以下是一个简单的示例，展示了如何使用 ECharts 实现两级联动的饼图：

首先，在 HTML 文件中创建两个 div 元素，用于放置两个饼图：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts 饼图多级联动示例</title>
</head>
<body>
  <div id="pieChart1" style="width: 600px;height:400px;"></div>
  <div id="pieChart2" style="width: 600px;height:400px;"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

接下来，在 main.js 文件中编写 JavaScript 代码：

// 初始化两个饼图实例
var pieChart1 = echarts.init(document.getElementById('pieChart1'));
var pieChart2 = echarts.init(document.getElementById('pieChart2'));

// 定义第一级饼图的数据
var data1 = [
  { value: 300, name: 'A' },
  { value: 200, name: 'B' },
  { value: 150, name: 'C' }
];

// 定义第二级饼图的数据
var data2 = {
  'A': [
    { value: 100, name: 'A1' },
    { value: 200, name: 'A2' }
  ],
  'B': [
    { value: 50, name: 'B1' },
    { value: 150, name: 'B2' }
  ],
  'C': [
    { value: 30, name: 'C1' },
    { value: 120, name: 'C2' }
  ]
};

// 配置第一个饼图
var option1 = {
  series: [
    {
      type: 'pie',
      radius: '55%',
      data: data1,
      label: {
        show: true,
        formatter: '{b}: {c} ({d}%)'
      }
    }
  ]
};

// 配置第二个饼图
var option2 = {
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      data: [],
      label: {
        show: true,
        formatter: '{b}: {c} ({d}%)'
      }
    }
  ]
};

// 使用配置项渲染两个饼图
pieChart1.setOption(option1);
pieChart2.setOption(option2);

// 监听第一个饼图的点击事件
pieChart1.on('click', function (params) {
  // 更新第二个饼图的数据
  var newData = data2[params.name];
  if (newData) {
    pieChart2.setOption({
      series: [
        {
          data: newData
        }
      ]
    });
  }
});

在这个示例中，我们首先创建了两个饼图实例，并分别为它们设置了初始数据。然后，我们监听第一个饼图的点击事件，当点击某个扇区时，我们根据点击的扇区名称更新第二个饼图的数据。这样就实现了两级联动的饼图。

Echarts饼图怎样实现多级联动

相关阅读