如何在pyecharts中添加筛选器

Question

如何在pyecharts中添加筛选器
用pyecharts写了个折线图，因为数据条目比较多，在图例中难以找到相应的数据。想问一下怎么样才能加个类似搜索框的东西呢

Answer 1

PyEcharts 不支持直接添加筛选器，但是可以使用 JavaScript 代码手动添加。

比如说，可以通过如下代码为 PyEcharts 图添加一个筛选器

<input type="text" id="filter-input" onkeyup="filter()">

<script type="text/javascript">
function filter() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("filter-input");
    filter = input.value.toUpperCase();
    ul = document.getElementById("legend");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

上面的代码定义了一个输入框和一个筛选函数。筛选函数接收输入框中的文本并在图例中进行搜索，隐藏不包含搜索文本的图例项。

请注意，上面的代码需要在 PyEcharts 图的 HTML 文件中添加，并且假定图例的 id 为 legend。如果实际图例的 id 不同，请将代码中的 id 替换为实际的 id。