【ECharts】5.事件处理

发表于 更新于 分类于 ，

1.什么是事件处理

在 ECharts 的图表中用户的操作将会触发相应的事件，比如点击事件。我们可以使用 on 方法来监听用户触发的事件，通过回调函数做出相应的处理，比如弹出对话框、跳转到另一个地址等操作。

语法格式： 

1
myChart.on("事件名称", 回调函数);

在 ECharts 中，事件分为两种类型： - 鼠标事件，或者悬浮（hover）图表的图形时触发的事件。 - 交互的组件后触发的行为事件，例如数据区域缩放时触发的 datazoom 事件。

2.鼠标事件

在 ECharts 中，支持的常见鼠标事件有以下几种： - click：点击鼠标时触发。 - dblclick：在同一个元素上双击鼠标时触发。 - mouseup：释放按下的鼠标键时触发。 - mousedown：按下鼠标键时触发。 - mousemove：当鼠标在一个节点内部移动时触发。 - mouseover：鼠标进入一个节点时触发。 - mouseout：鼠标离开一个节点时触发。 - globalout：鼠标移出坐标系触发。 - contextmenu：打开上下文菜单时被触发。

打开蓝桥实验环境病下载文件： 

1
2
wget https://labfile.oss.aliyuncs.com/courses/5788/echarts.js
wget https://labfile.oss.aliyuncs.com/courses/3774/jquery-3.6.0.min.js

在index.html中写入内容： :::: code-tabs @tab index.html

:collapsed-lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="echarts.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
    <title>事件触发</title>
  </head>

  <body>
    <div id="main" style="width:600px; height:400px;"></div>
    <script>
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option = {
        series: [
          {
            name: "人气",
            type: "pie",
            radius: "50%",
            data: [
              { value: 35, name: "数据库" },
              { value: 48, name: "后端开发" },
              { value: 24, name: "信息安全" },
              { value: 30, name: "人工智能" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      // 处理点击事件并且跳转到相应的课程页面
      myChart.on("click", function (params) {
        console.log(params.name);
        window.open("https://www.lanqiao.cn/courses/?category=" + params.name);
      });
    </script>
  </body>
</html>
::::

点击图表后会发现打开了响应的浏览器窗口。

在上面的代码中，我们用params.name得到了点击的区域名，用window.open来打开了对应的课程页面。

其他的事件也是类似的用法，可以参考官方文档。