Добавьте событие клика к метке узла - PullRequest
Новая
       7

Добавьте событие клика к метке узла

0 голосов
/ 08 апреля 2020

1: я написал HTML файл следующим образом 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 400px;height: 200px;background-color: bisque;"></div>
    <script>
        var myChart = echarts.init(document.getElementById("main"));
        var option = {

            series: [{
                type: 'tree',
                data: [{
                    name: "AAA",
                    children: [{
                        name: "BBB"
                    }]
                }],
                label: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left',
                    fontSize: 10,
                },
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

2: Открыть в браузере enter image description here

3: Я хочу вызвать событие, когда я нажимаю на метку в узле дерева. Что мне делать?

1 Ответ

0 голосов
/ 08 апреля 2020

Это легко. Просто начните прослушивать события щелчка, как это: 

myChart.on('click', 'series.tree', e => console.log(e));

, где series.tree - параметр фильтра событий. В ответ вы получите объект события: 

{
    componentType: "series"
    componentSubType: "tree"
    componentIndex: 0
    seriesType: "tree"
    seriesIndex: 0
    seriesId: "series00"
    seriesName: "series0"
    name: "BBB"
    dataIndex: 2
    data: {name: "BBB"}
    dataType: "main"
    value: undefined
    color: "lightsteelblue"
    dimensionNames: ["value"]
    encode: {value: Array(1)}
    marker: "<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:lightsteelblue;"></span>"
    $vars: (3) ["seriesName", "name", "value"]
    event: {type: "click", event: MouseEvent, target: t, topTarget: t, cancelBubble: false, …}
    type: "click"
}

Также вы можете прослушивать любой щелчок при подписке на события без фильтра: 

myChart.on('click', e => console.log(e));

Полезные документы:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...