流量监控项目需求：
根据表格数据，添加多选功能，默认全选，根据已选项更新图表视图
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了！
希望本文对你有所帮助！