Echarts饼图怎样实现多级联动

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

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

  1. 首先,在 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>
  1. 接下来,在 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
        }
      ]
    });
  }
});

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

推荐阅读:
  1. django怎么引用echarts
  2. 报表怎么集成echarts官网

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

echarts

上一篇:Echarts箱线图如何显示异常值

下一篇:如何优化Java中的Predicate性能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》