流量監控項目需求：
根據表格數據，添加多選功能，默認全選，根據已選項更新圖表視圖
1.表格需要多選
2.要聯動圖表，所以關鍵是要利用表格多選的觸發回調函數
vue table中使用多選：
很簡單，只需要在table中增開一項，type定義為selection即可：
如何默認列表全選呢？
先關聯table：
數據加載完成以后，獲取列表數據長度，手動循環切換狀態（toggleRowSelection是關鍵，通過這個方法來觸發echarts的刷新）：
OK，現在可以實現默認全選狀態了：
如何與echarts圖表聯系起來呢？
我使用的圖有兩個，餅圖和折線圖，先說餅圖，餅圖需要的是數據項名稱和數據，即name和value，方法是我們ajax請求成功后，對數據進行循環，獲取到所需的name和value值，具體方法不贅述了，需要了解echarts的安裝、使用、配置的，可以前往echarts官網查看文檔，也可以翻看我上一篇關於echarts的博文，里面記錄了關於圖表的使用和配置，數據的規則，如何刷新視圖，以及踩過的坑，這里就不重復說明了，直接上代碼：
實現的效果為：
項目中，折線圖的需求是，顯示十條折線，橫坐標為當前月往前推五個月，也就是近半年的數據，縱坐標為每月的點擊量，OK，添加折線圖，通過多選框的監聽回調事件toggleRowSelection來獲取已選擇的項，通過循環拿出每一項的ID，當然這個ID是你自己數據的ID，然后通過接口將含有ID列表的數組發往服務器，返回數據中包含多個月，以及每個月的點擊量，這樣就實現了每次點擊都會刷新折線圖，這里有個需要注意的，就是現在默認是全選，當我打印出已選項的時候回發現，每次刷新頁面都是選擇整個表格從1-10的數據，也就是說會觸發10次監聽事件，而我們只需要最后全選狀態下的最后一次，所以這里我加了個判斷，默認firstTime為true，當我請求的數據總數和已選擇的數據總數相同，並且是第一次進入時，才生成折線圖，這樣就把10次ajax請求縮減為了1次：
生成折線圖：
OK，現在可以把折線圖，以及多選數據聯動實現了：
vue中使用table多選，翻頁后已選項如何保存呢？
使用row-key屬性獲取已選項的ID，當然這個ID也是你自己數據的ID，比如我下面紅框中的toanID，然后建立一個空數組保存已選項的ID，就OK了：
table中：
data中：
methods中：
根據周數更新視圖，跟月數一樣，對數據的一些處理我已經在其他博文中寫道，有興趣的可以千萬查看：
https://www.cnblogs.com/wangqiao170/p/9294448.html
又有一個問題，如果頁面大小改變了怎么辦呢？
一般我們的想法都是用window.onresize監聽窗口事件，確實需要這樣做，但是這個事件只能生效一次，也就是說，我們的餅圖和折線圖是分開在兩個方法里實現的，要調用兩次window.onresize，第二次不會生效，這里可以將監聽事件封裝成函數，將餅圖和折線圖的對象保存起來，然后通過函數調用的形式在一次監聽兩個事件：
定義空對象
封裝修改圖表大小的函數
第一次進入的時候調用這個函數就OK了！
希望本文對你有所幫助！