Echarts饼状图和数据列表联动

实现效果

即点击饼状图的具体区域，实现对数据列表的筛选展示（筛选条件不进行叠加）
因为在表单中存在饼状图的筛选字段，所以说只需要通过点击事件将筛选值填充到表单中，进行提交即可

myChart1.on('click', function (params) {
                        var showName = params.name;
                        var value="";
                        if(showName=="商户进入"){
                            value="1";
                        }else if(showName=="小程序进入"){
                            value="2";
                        }else if(showName=="活动进入"){
                            value="3";
                        }
                      
                        $("#channelHtml").val(value).trigger('change');
                        console.log(value);
                        $("#searchForm").submit();
                    });

注意：因为我的需求是单项筛选，不进行条件组合，所以在填充条件之前，必须进行清除表单的操作

myChart1.on('click', function (params) {
                        var showName = params.name;
                        var value="";
                        if(showName=="商户进入"){
                            value="1";
                        }else if(showName=="小程序进入"){
                            value="2";
                        }else if(showName=="活动进入"){
                            value="3";
                        }
                        res();//清除表单数据
                        $("#channelHtml").val(value).trigger('change');
                        console.log(value);
                        $("#searchForm").submit();
                    });


 <script type="text/javascript">
       function  res(){
           var form = document.getElementById("searchForm");
           form.reset();//文本框重置
           $("#channelHtml").val("").trigger('change');//下拉框重置
           $("#isLeague").val("").trigger('change');
        };
    </script>

注意：直接调用表单的reset方法，只能对文本框进行清空重置，无法对下拉框进行重置，所以需要对下拉框进行单独处理

不足：

1. 目前的点击饼状图筛选调用的是表单提交的方式，所以整个页面的会进行刷新展示，最好的应该是能做成ajax异步调用的方式，这样的话交互效果会更好一点。
2. 因为目前的筛选值表单中都有字段，所以后台逻辑不用修改，但是如果筛选条件不是表单字段，则需要更改后台的筛选逻辑，来匹配所选的条件，例如：对年龄段进行筛选，就不能直接填充表单达到目的，得在后台增加年龄判断。

如有不足，还请指正！