echarts-tree label点击事件

最新推荐文章于 2023-05-12 14:23:50 发布

1111:-C

最新推荐文章于 2023-05-12 14:23:50 发布

阅读量4.1k

点赞数 8

文章标签： echarts

本文链接：https://blog.csdn.net/weixin_43216014/article/details/112205987

版权

最近有个需求，在echarts tree中点击圆点展开节点，点击文字弹出明细信息，通过event.target.culling来区分是点击圆点还是文字。

 myChart.on('click', function (params) {
        if(params.event.target.culling === true){
            alert("点击了节点");
        } else if(params.event.target.culling === false){
            alert("点击了label");
        }
 });

不知道这字段什么意思，文档也没查到，自测好像没什么问题。

附上完整代码,可以保存html直接打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
    <script crossorigin="anonymous" integrity="sha512-Rw7ABPI0CoYquQZEa2QMaeMR5q5XESMNp4uGOsXPzU9JnvWW6S27+pz8fAjVlL7/kq6Q12MtGVcPkJya2blqAg==" src="https://lib.baomitu.com/echarts/5.2.0/echarts.js"></script>
</head>
<body>
<div id="main" style="height: 600px;width: 1000px;margin: 0 auto"></div>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var data = {
        "name": "animate",
        "children": [
            {"name": "Easing", "value": 17010},
            {"name": "FunctionSequence", "value": 5842},
            {
                "name": "interpolate",
                "children": [
                    {"name": "ArrayInterpolator", "value": 1983},
                    {"name": "ColorInterpolator", "value": 2047},
                    {"name": "DateInterpolator", "value": 1375},
                    {"name": "Interpolator", "value": 8746},
                    {"name": "MatrixInterpolator", "value": 2202},
                    {"name": "NumberInterpolator", "value": 1382},
                    {"name": "ObjectInterpolator", "value": 1629},
                    {"name": "PointInterpolator", "value": 1675},
                    {"name": "RectangleInterpolator", "value": 2042}
                ]
            },
            {"name": "ISchedulable", "value": 1041},
            {"name": "Parallel", "children": [
                {"name": "BetweennessCentrality", "children": [
                        {"name": "BetweennessCentrality", "value": 3534},
                        {"name": "LinkDistance", "value": 5731},
                        {"name": "MaxFlowMinCut", "value": 7840},
                        {"name": "ShortestPaths", "value": 5914},
                        {"name": "SpanningTree", "value": 3416}
                    ]},
                {"name": "LinkDistance", "value": 5731},
                {"name": "MaxFlowMinCut", "value": 7840},
                {"name": "ShortestPaths", "value": 5914},
                {"name": "SpanningTree", "value": 3416}
            ]},
            {"name": "Pause", "value": 449},
        ]
    }
    var option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',
                data: [data],
                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',
                symbolSize: 12,
                label: {
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right',
                    fontSize: 10
                },
                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },
                /*emphasis: {
                    focus: 'descendant'
                },*/
                initialTreeDepth: 1,
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    }
    myChart.setOption(option, true);
    myChart.on('mousedown', function(e) {
        const name = e.data.name;
        const curNode = myChart._chartsViews[0]._data.tree._nodes.filter(function(item) {
            return item.name === name;
        });
        if(curNode[0].depth){
            const depth = curNode[0].depth;
            const curIsExpand = curNode[0].isExpand;
            myChart._chartsViews[0]._data.tree._nodes.forEach(function(item) {
                if (e.event.target.culling === true) {
                    //点击节点展开下一级，同时收缩同级节点
                    if (item.depth === depth && item.name !== name && !curIsExpand) {
                        item.isExpand = false;
                    }
                } else if (e.event.target.culling === false) {
                    //点击标签阻止默认节点展开事件
                    if (item.depth === depth) {
                        if (item.name === name) {
                            item.isExpand = true;
                        } else {
                            item.isExpand = false;
                        }
                    }
                }
            });
        }
    })
    myChart.on('click', function (params) {
        if(params.event.target.culling === true){
            // alert("点击了节点");
            //点击了节点,但是啥也不干
        } else if(params.event.target.culling === false){
            alert("点击了label");
        }
    });
</script>
</body>
</html>

1111:-C

关注

8
点赞
踩
24

收藏

觉得还不错? 一键收藏
15
评论
echarts-tree label点击事件

最近有个需求，在echarts tree中点击圆点展开节点，点击文字弹出明细信息，通过event.target.culling来区分是点击圆点还是文字。 myChart.on('click', function (params) { if(params.event.target.culling === true){ alert("点击了节点"); } else if(params.event.target.culling === false){
复制链接

扫一扫