Echarts 对饼状图上的各模块添加点击事件

发布时间：2024年01月16日

文章目录

需求

实现 echarts 中饼图点击区块事件
在这里插入图片描述

分析

当用户点击饼状图上的各个模块时，我们可以通过 JavaScript 监听 click 事件来实现相应的交互逻辑。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>饼状图点击事件示例</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart-container" style="width: 600px; height: 400px;"></div>

  <script>
    // 创建饼状图的容器
    var chartContainer = document.getElementById('chart-container');

    // 创建 ECharts 实例
    var myChart = echarts.init(chartContainer);

    // 配置饼状图的数据
    var option = {
      series: [{
        type: 'pie',
        data: [
          {value: 335, name: 'A'},
          {value: 310, name: 'B'},
          {value: 234, name: 'C'},
          {value: 135, name: 'D'},
          {value: 1548, name: 'E'}
        ]
      }]
    };

    // 监听饼状图点击事件
    myChart.on('click', function(params) {
      // 获取被点击项的名称和数值
      var name = params.name;
      var value = params.value;

      // 在控制台输出被点击项的信息
      console.log(name + ' 被点击了，数值为：' + value);
      alert(name + ' 被点击了，数值为：' + value);
    });

    // 使用配置项显示饼状图
    myChart.setOption(option);
  </script>
</body>
</html>

  • 在上述代码中，我们首先创建了一个 <div> 容器来放置饼状图，并引入了 ECharts 库。然后，使用 echarts.init 方法创建了一个 ECharts 实例，并设置了饼状图的数据。

  • 接着，使用 myChart.on 方法监听了饼状图的 ‘click’ 事件，并在回调函数中获取被点击项的名称和数值，并将其输出到控制台和一个弹窗中。

  • 最后，使用 myChart.setOption(option) 将配置项应用到 ECharts 实例中，从而显示饼状图。

文章来源:https://blog.csdn.net/qq_53810245/article/details/135629332
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章