Echart 点击事件整理

最新推荐文章于 2024-05-29 22:54:10 发布

Web小单

最新推荐文章于 2024-05-29 22:54:10 发布

阅读量7.5k

点赞数 3

分类专栏： js 文章标签： echarts

本文链接：https://blog.csdn.net/qq_34618492/article/details/132901192

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

工作经常会用到图表组件，这里主要针对 echarts 插件中的点击事件说明，代码不是很难，主要是如何区分点击的位置。

鼠标事件的处理

ECharts 支持常规的鼠标事件类型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。

// 基于准备好的dom，初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
    window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});

如何区分鼠标点击到了哪里

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge（边）上。
            }
            else {
                // 点击到了 graph 的 node（节点）上。
            }
        }
    }
});

使用 `query` 只对指定的组件的图形元素的触发回调：

chart.on(eventName, query, handler);

query 可为 string 或者 Object 或者 不传。

如果为 string 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如：

chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'xAxis.category', function () {...});

如果为 Object，可以包含以下一个或多个属性，每个属性都是可选的：

{
    <mainType>Index: number // 组件 index
    <mainType>Name: string // 组件 name
    <mainType>Id: string // 组件 id
    dataIndex: number // 数据项 index
    name: string // 数据项 name
    dataType: string // 数据项 type，如关系图中的 'node', 'edge'
    element: string // 自定义系列中的 el 的 name
}

例如：

chart.setOption({
    // ...
    series: [{
        // ...
    }, {
        // ...
        data: [
            {name: 'xx', value: 121},
            {name: 'yy', value: 33}
        ]
    }]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
    // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。
});
chart.on('mouseover', {dataIndex: 0}, function () {
    // data 数据项下标为 '0' 的元素被 'mouseover' 时，此方法被回调。
});
chart.on('mouseover', {seriesName: 'xx'}, function () {
    // series name 为 'xx' 的系列中的图形元素被 'mouseover' 时，此方法被回调。
});

具体详情可查：Documentation - Apache ECharts

监听“空白处”的事件

有时候，开发者需要监听画布的“空白处”所触发的事件。比如，当需要在用户点击“空白处”的时候重置图表时。

在讨论这个功能之前，我们需要先明确两种事件。zrender 事件和echarts 事件。

myChart.getZr().on('click', function (event) {
    // 该监听器正在监听一个`zrender 事件`。
});
myChart.on('click', function (event) {
    // 该监听器正在监听一个`echarts 事件`。
});

zrender 事件与echarts 事件不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发。事实上echarts 事件 是在 zrender 事件 的基础上实现的，也就是说，当一个 zrender 事件 在图形元素上被触发时，echarts 将触发一个 echarts 事件 给开发者。

有了 zrender事件，我们就可以实现 “监听空白处的事件”，具体如下：

myChart.getZr().on('click', function (event) {
    // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
    if (!event.target) {
        // 点击在了空白处，做些什么。
    }
});

完整代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.common.js"></script>
    <title>Title</title>
</head>

<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        grid: {
            show: true,
            containLabel: true,
            borderColor: 'orange',
            borderWidth: 2,
            left: 0,
            bottom: 0
        },
        tooltip: {},
        xAxis: {
            data: ["x坐标一", "x坐标二", "x坐标三", "x坐标四", "x坐标五", "x坐标六"],
            type: 'category',
            triggerEvent: true // 是否响应和触发鼠标事件，默认不响应
        },
        yAxis: {
            triggerEvent: true // 是否响应和触发鼠标事件，默认不响应
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            label: {
                show: true
            }
        }]
    };
    myChart.setOption(option);
    myChart.getZr().on('click', function (event) {
        // 该监听器正在监听一个`zrender 事件`。
        // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
        if (!event.target) {
            // 点击在了空白处，做些什么。
            console.log('空白处', event.target);
        }
    });
    myChart.on('click', function (params) {
        console.log("点击了" + params.componentType + params.value);
    });
</script>

</html>