Echarts - 图表绑定事件（事件处理）-蒲公英云

Echarts - 图表绑定事件（事件处理）

前言

ECharts 允许通过 on 方法来监听用户对图表的行为，且可以拿到 item 参数用以业务逻辑处理。

例如，如下 点击事件 效果图，可获取相关数据示例：
在这里插入图片描述

实现方法

官方文档: https://echarts.apache.org/zh/api.html#events

如下示例，可直接复制代码，以 *.html 运行查看效果图代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可直接复制运行</title>
</head>
<body>
<!-- dom -->
<div id="charts" style="height: 500px;"></div>
<!-- end -->
<!-- echarts cdn(若已失效请更换或下载本地引入) -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<script> // 获取元素并初始化 var chartDom = document.getElementById('charts'); var myChart = echarts.init(chartDom); // 配置项(示例) var option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', }, series: [ { name: '访问来源', type: 'pie', radius: '50%', data: [ { value: 1048, name: '搜索引擎'}, { value: 735, name: '直接访问'}, { value: 580, name: '邮件营销'}, { value: 484, name: '联盟广告'}, { value: 300, name: '视频广告'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 创建图表 myChart.setOption(option); // 绑定事件(以下示例仅绑定点击事件) // 其他事件文档: https://www.runoob.com/echarts/echarts-events.html myChart.on('click', (param) => { // x轴值: param.name // y轴值: param.data // console.log(param) // test alert(param.name + "-----" + param.data.value) console.log(param.name) console.log(param.data) }); </script>
</body>
</html>