Question

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：使用浏览器打开

3：我想在树节点上单击标签时触发事件。该怎么办？

Answer 1

很简单。刚开始听这样的点击事件：

<div class="conBtnIntro"><input type="button" value="Addizione" onclick="document.location='summ.html';" id="btn1"class="btnIntro"/></div>
<div class="conBtnIntro"><input type="button" value="Sottrazione" onclick="document.location='diff.html';" id="btn2"class="btnIntro"/></div>
<div class="conBtnIntro"><input type="button" value="Moltiplicazione" onclick="document.location='product.html';" id="btn3"class="btnIntro"/></div>

其中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"
}

有用的文档：

将click事件添加到节点的标签

1 个答案: