ColingChen 2023-10-12 20:36 采纳率: 0%
浏览 2

echarts tree生成的html在浏览器打开后无法搜索文本

树图可以正常打开，节点的label可以点击缩放，但是节点文本无法复制。
在浏览器使用ctrlf搜索节点名无效，没懂这是为啥，它是矢量图吗，不是文本格式所以无法搜索？
请问是否有简便的解决办法呢♡(´∀｀)人(´∀｀)♡
或者可否在html里自己加个搜索

  • 写回答

2条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-10-13 09:33
    关注

    【以下回答由 GPT 生成】

    问题解决方案: 由于echarts库生成的树图是一个矢量图形，它无法被浏览器的搜索功能所搜索。然而，我们可以通过以下几种方法来解决这个问题:

    1. 使用数据驱动的搜索功能: 我们可以在HTML文件中添加一个搜索框和按钮，通过输入的关键词来匹配节点名称，并高亮显示搜索结果的节点。在搜索框中输入关键词后，点击按钮触发搜索函数，该函数会遍历树的节点，寻找匹配的节点名称，并将它们的样式更改为高亮。下面是一个示例代码：
    <!DOCTYPE html>
<html>
<head>
    <title>树图搜索功能</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>
<body>
    <input type="text" id="search-input">
    <button onclick="search()">搜索</button>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // 生成树图的数据
        var treeData = {
            name: 'Node 1',
            children: [
                {
                    name: 'Node 1.1',
                    children: [
                        {name: 'Node 1.1.1'},
                        {name: 'Node 1.1.2'}
                    ]
                },
                {
                    name: 'Node 1.2',
                    children: [
                        {name: 'Node 1.2.1'},
                        {name: 'Node 1.2.2'}
                    ]
                }
            ]
        };

        // 初始化树图
        var myChart = echarts.init(document.getElementById('chart'));
        var option = {
            series: [
                {
                    type: 'tree',
                    data: [treeData]
                }
            ]
        };
        myChart.setOption(option);

        // 搜索函数
        function search() {
            var input = document.getElementById('search-input').value.toLowerCase();
            var nodes = myChart.getOption().series[0].data[0];
            var toHighlight = [];

            // 遍历节点，查找匹配的节点
            function traverse(node) {
                if (node.name.toLowerCase().includes(input)) {
                    toHighlight.push(node);
                }
                if (node.children) {
                    for (var i = 0; i < node.children.length; i++) {
                        traverse(node.children[i]);
                    }
                }
            }

            traverse(nodes);

            // 高亮显示匹配的节点
            myChart.dispatchAction({
                type: 'unfocusNodeAdjacency' // 清除之前的高亮
            });
            for (var i = 0; i < toHighlight.length; i++) {
                myChart.dispatchAction({
                    type: 'focusNodeAdjacency',
                    seriesIndex: 0,
                    dataIndex: toHighlight[i].dataIndex
                });
            }
        }
    </script>
</body>
</html>

    你可以将上述代码保存为一个HTML文件，然后使用浏览器打开该文件，在搜索框中输入关键词，点击搜索按钮即可进行搜索。

    1. 将树图转换为文本: 如果你想要复制树图的文本内容，你可以将树图的节点名称导出为文本文件。下面是一个将树图节点名称导出为文本文件的示例代码：
    import json

treeData = {
    "name": "Node 1",
    "children": [
        {
            "name": "Node 1.1",
            "children": [
                {"name": "Node 1.1.1"},
                {"name": "Node 1.1.2"}
            ]
        },
        {
            "name": "Node 1.2",
            "children": [
                {"name": "Node 1.2.1"},
                {"name": "Node 1.2.2"}
            ]
        }
    ]
}

# 导出节点名称为文本文件
def export_tree_text(node, file):
    if "name" in node:
        file.write(node["name"] + "\n")
    if "children" in node:
        for child in node["children"]:
            export_tree_text(child, file)

with open("tree.txt", "w") as file:
    export_tree_text(treeData, file)

    上述代码将树图的节点名称导出为一个名为tree.txt的文本文件。

    补充说明: 以上提供的两种解决方案，第一种是在HTML中添加搜索功能，可以在浏览器中直接使用。第二种是将节点名称导出为文本文件，你可以使用任何文本编辑器打开该文件，并进行搜索、复制等操作。


    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题？

问题事件

  • 创建了问题 10月12日