Echarts饼状图和数据列表联动

野性酷女 2022-02-16 11:43 757阅读 0赞

## 实现效果 ##

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

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

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.  因为目前的筛选值表单中都有字段，所以后台逻辑不用修改，但是如果筛选条件不是表单字段，则需要更改后台的筛选逻辑，来匹配所选的条件，例如：对年龄段进行筛选，就不能直接填充表单达到目的，得在后台增加年龄判断。

如有不足，还请指正！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW56aG91X3lo_size_16_color_FFFFFF_t_70]: /images/20220216/6776b14e9a2141cc8bde5078c8ca90b5.png