主页 / coding / 问题 / 79526901
Accepted
Alice
Asked: 2025-03-22 11:30:25 +0800 CST

echarts中如何知道点击事件的实际目标？

  • 772

我想为我的 echarts 图表添加注释功能。如果有任何注释，它将被标记为带有绿色方形标记的绿色虚线。当用户单击绿色方形标记时，将打开一个弹出窗口以显示实际注释。

当我运行下面的命令时，只要我单击注释标记线上的任意位置，它就会被触发。如何判断用户是否专门单击了绿色方形标记？

myChart.on('click', "series.line", function(params) {
  console.log('normal click series.markLine', params)
})

以下是演示：https://codepen.io/lora999/pen/azbGPKY

在此处输入图片描述

echarts

1 个回答

  1. Best Answer

    如果你探索params一下，myChart.on('click', "series.line", function(params){... 你会发现有方法可以识别矩形是否被点击。最直接的方法似乎是params.event.target.type === 'rect'（也用渲染器 svg 测试过）：

    myChart.on('click', "series.line", function(params) {
    if(params.event.target.type === 'rect'){
        console.log('Rectangle clicked');
        // use params.data.name or params.data._id to further
        // identify the target, if multiple annotations are added
    }
});

    可运行片段：

    const myChart = echarts.init(document.getElementById("chart-container"), null, {
   renderer: "canvas",
   useDirtyRect: false,
});

const option = {
    "useUTC": false,
    "grid": {
        "containLabel": true,
        "left": 35,
        "right": 40,
        "top": 40,
        "bottom": 40
    },
    "xAxis": {
        "type": "time",
    },
    "yAxis": {
        "type": "value",
    },
    "tooltip": {
        appendTo: 'body',
        "borderColor": "transparent",
        "show": true,
        "trigger": "axis",
        enterable: true,
    },
    "legend": {
        "orient": "horizontal",
        "show": true,
        "type": "scroll",
        "bottom": 0,
    },
    "series": [
        {
            "name": "series1",
            "data": [
                [
                    1041811200000,
                    30429.64
                ],

                [
                    1043625600000,
                    99323.95999999999
                ],

                [
                    1050883200000,
                    4219.2
                ],
            ],
            "connectNulls": true,
            "type": "line",
            "smooth": false,

            "showSymbol": false,

        },
        {
            id: 'Annotation',
            name: 'annotation',
            type: "line",
            markLine: {
                symbol: 'none',
                label: {
                    show: true,
                    formatter: '{icon|}',
                    rich: {
                        icon: {
                            height: 20,
                            width: 20,
                            backgroundColor: 'green',
                            _id:'__test__'
                        },
                        _id:'__test__'
                    }
                },
                data: [
                    {
                        name: 'annotationLine',
                        xAxis: 1043625600000,
                        lineStyle: {
                            width: 2,
                            color:'green'
                        },
                        _id: 'annotationLine'
                    },
                ]
            }

        },
    ],
};


myChart.on('click', "series.line", function(params) {
    if(params.event.target.type === 'rect'){
        console.log('Rectangle clicked');
        // use params.data.name or params.data._id to further
        // identify the target, if multiple annotations are added
    }
});


myChart.setOption(option);

window.addEventListener('resize', myChart.resize);
    <div id="chart-container" style="height:400px; min-width: 800px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>

    然而，最安全的解决方案是将矩形与线分开，使它们成为两个不同的注释，矩形实现为markPoint：

    const myChart = echarts.init(document.getElementById("chart-container"), null, {
   renderer: "canvas",
   useDirtyRect: false,
});

const option = {
    "useUTC": false,
    "grid": {
        "containLabel": true,
        "left": 35,
        "right": 40,
        "top": 40,
        "bottom": 40
    },
    "xAxis": {
        "type": "time",
    },
    "yAxis": {
        "type": "value",
    },
    "tooltip": {
        appendTo: 'body',
        "borderColor": "transparent",
        "show": true,
        "trigger": "axis",
        enterable: true,
    },
    "legend": {
        "orient": "horizontal",
        "show": true,
        "type": "scroll",
        "bottom": 0,
    },
    "series": [
        {
            "name": "series1",
            "data": [
                [
                    1041811200000,
                    30429.64
                ],

                [
                    1043625600000,
                    99323.95999999999
                ],

                [
                    1050883200000,
                    4219.2
                ],
            ],
            "connectNulls": true,
            "type": "line",
            "smooth": false,

            "showSymbol": false,

        },
        {
            id: 'Annotation',
            name: 'annotation',
            type: "line",
            markLine: {
                symbol: 'none',
                silent: true, // doesn't respond to click
                label: {
                    show: false
                },
                data: [
                    {
                        name: 'annotationLine',
                        xAxis: 1043625600000,
                        lineStyle: {
                            width: 2,
                            color:'green'
                        },
                        _id: 'annotationLine'
                    },
                ]
            },
            markPoint: {
                symbol: 'rect',
                symbolSize: 20,
                symbolOffset: [0, -10],
                itemStyle: {
                    color: 'green'
                },
                label: {
                    show: false,
                },
                data: [
                    {
                        name: 'annotationPoint',
                        coord: [1043625600000, 100000],
                        _id: 'annotationPoint'
                    },
                ]
            }

        },
    ],
};


myChart.on('click', "series.line", function(params) {
    // in this scenario, only the markPoint is responding to clicks; but if other items are
    // added, params.componentType and/or params.data.name (or _id) may be used to identify the target
    if(params.componentType === 'markPoint'){
        console.log('Rectangle clicked', params.data.name);
    }
})


myChart.setOption(option);

window.addEventListener('resize', myChart.resize);
    <div id="chart-container" style="height:400px; min-width: 800px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>

    或者使用图标标签，如原始代码所示（使用 svg 渲染器）：

    const myChart = echarts.init(document.getElementById("chart-container"), null, {
   renderer: "svg",
   useDirtyRect: false,
});

const option = {
    "useUTC": false,
    "grid": {
        "containLabel": true,
        "left": 35,
        "right": 40,
        "top": 40,
        "bottom": 40
    },
    "xAxis": {
        "type": "time",
    },
    "yAxis": {
        "type": "value",
    },
    "tooltip": {
        appendTo: 'body',
        "borderColor": "transparent",
        "show": true,
        "trigger": "axis",
        enterable: true,
    },
    "legend": {
        "orient": "horizontal",
        "show": true,
        "type": "scroll",
        "bottom": 0,
    },
    "series": [
        {
            "name": "series1",
            "data": [
                [
                    1041811200000,
                    30429.64
                ],

                [
                    1043625600000,
                    99323.95999999999
                ],

                [
                    1050883200000,
                    4219.2
                ],
            ],
            "connectNulls": true,
            "type": "line",
            "smooth": false,

            "showSymbol": false,

        },
        {
            id: 'Annotation',
            name: 'annotation',
            type: "line",
            markLine: {
                symbol: 'none',
                silent: true, // doesn't respond to click
                label: {
                    show: false
                },
                data: [
                    {
                        name: 'annotationLine',
                        xAxis: 1043625600000,
                        lineStyle: {
                            width: 2,
                            color:'green'
                        },
                        _id: 'annotationLine'
                    },
                ]
            },
            markPoint: {
                symbol: 'rect',
                symbolSize: 20,
                symbolOffset: [0, -10],
                itemStyle: {
                    color: 'green'
                },
                label: {
                    show: false,
                },
                data: [
                    {
                        name: 'annotationPoint',
                        coord: [1043625600000, 100000],
                        _id: 'annotationPoint'
                    },
                ]
            }

        },
    ],
};


myChart.on('click', "series.line", function(params) {
    // in this scenario, only the markPoint is responding to clicks; but if other items are
    // added, params.componentType and/or params.data.name (or _id) may be used to identify the target
    if(params.componentType === 'markPoint'){
        console.log('Rectangle clicked', params.data.name);
    }
});


myChart.setOption(option);

window.addEventListener('resize', myChart.resize);
    <div id="chart-container" style="height:400px; min-width: 800px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>

    • 1

相关问题