【echarts踩坑記錄】2、複選框+動態隱藏、顯示數據

第一節的例子裏我將ajax請求返回的所有數據都加載成了餅狀圖，但是實際應用中我們可能並不需要全部顯示，可能需要做一個多選框選擇需要的name再傳給後臺……然而我也不想修改sql。

於是就考慮在前端控制啦，後端只需要無腦一次查出全部的數據，讓前端折騰吧～用戶點哪裏我就顯示哪裏～所以這次就是由簡入繁來探討echarts動態隱藏和顯示數據的功能。

正文

echarts通過一個selected的對象來控制顯示與隱藏，默認都是true ，只要在myChart.setOption(option, true)語句之前設置就可以生效。

比如上一節中的demo，我在setOption之前加上一句——

option.legend.selected ={'馬家溝流量':false};

可以看到對應的圖例已經自動變灰了，而且還可以通過再次點擊來開啓

可以看到，option.legend.selected裏對象的屬性設置，和用戶直接點擊圖例是一個效果～

selected是一個對象，由key-value鍵值對組成，key爲圖例的名稱，value爲true或false。然後我對代碼進行了一點修改——

／／定義一個對象的變量
var selectOption={};
／／賦值
selectOption['馬家溝流量']=false;

／／把SelectOption對象賦值給selected屬性
option.legend.selected =selectOption;

效果是一樣的，這樣我們通過直接初始化selectOption對象或賦值來改變數據的隱藏顯示。

複選框

剛剛的賦值方式可以應付簡單的場景，或是在需要時方便地改變少量屬性。下面介紹批量設置並且需要複選框的情況。

因爲複選框數量比較多，所以我先是通過ajax請求動態加載所有的複選框

<div id="mycheckbox"></div>

<script>
var checkbox="";
                  $.ajax({
                        type : "get",
                        url : "/station",
                        dataType:"json",
                        contentType : "application/json;charset=utf-8",
                        success : function(data) {
                             $.each(data, function(index, obj) {
                                 checkbox+="<div class=\"checkbox\"><label><input type=\"checkbox\" value=\""+obj.name+"\"</label>"+obj.name+"</div>";
                             })
                             $("#mycheckbox").append(checkbox);
                        }
                  })
</script>

有了複選框以後，需要一個按鈕，然後按下按鈕時遍歷所有的複選框，把選中的setOption的值設置爲true，沒有選中的設置爲false

需要注意更新option，否則不會生效，按鈕點擊事件代碼如下

  $("#mybutton").click(function(){
       $("input[type='checkbox']").each(function(){
              $(this).is(":checked")?selectOption[$(this).val()]=true:selectOption[$(this).val()]=false;
       });

       //更新option
       myChart.setOption(option);
  });

現在就可以任意選擇複選框，點擊按鈕改變餅狀圖和圖例啦～效果如下——