弹性图表视频预览：

chart.mp4image.png
点击左边temperature按钮弹出图表
image.png
点击右边Humidity按钮弹出图表
image.png
也可以做到收缩。点击temperature，就只剩下Humidity
image.png

思路：

关键点在于
(1) 图表是通过一个数组渲染的，增加或删除数组里面的项，就可以控制图表的显示，隐藏
(2) el-col的flex属性
(3) 图表的重绘

用element的网格系统，循环数组输出。
项目是根据后台返回的数据指导画出来的，后台返回每个图表位于哪一行哪一列，处理过后就变成dashboardData。

  1.  <!-- 三个循环渲染dashboard -->
  2.       <div v-for="(child,childIndex) in dashboardData" :key='childIndex'>
  3.         <el-row :gutter="8" :type="useFlex">
  4.           <el-col :xs="12" :sm="24" :lg="24" v-for="(item,itemIndex) in child" :key="itemIndex">
  5.             <div @click="showChart(chartData[childIndex],item)">
  6.               <stat :dashboardData="item" :date="date" :refreshKey="refreshKey"/>
  7.             </div>
  8.           </el-col>
  9.         </el-row>
  10.         <el-row :gutter="8" :type="useFlex">
  11.           <el-col :xs="12" :sm="24" :lg="24" v-for="(itemc,itemcIndex) in chartData[childIndex]" :key="itemcIndex">
  12.             <LineChart :itemData="itemc" :resizeKey="resizeKey"/>
  13.           </el-col>
  14.         </el-row>
  15.       </div>

传入数组和item，数组是用来v-for出echart的

  1.  // 点击stat 就出现图表
  2.     showChart(arr, item) {
  3.       if (arr.includes(item)) {
  4.         const index = arr.indexOf(item)
  5.         arr.splice(index, 1)
  6.       } else {
  7.         arr.push(item)
  8.         arr.sort((a, b) => {
  9.           return a.displayColumn - b.displayColumn
  10.         })
  11.       }
  12.       this.resizeKey++
  13.     },

resizeKey，是用来帮助echart重绘的，因为栅格系统用了flex，而且所有的echat都设置占了24格。
有两个图表时，两个图表会挤在同一行，一人一半。只有一个图表时，一个图表就会占满整行
所以当从两个图表=>一个图表，就会使得一个图表占满一行，但是echat却没有变化，还是原来占一半的样子。

我们可以在图表组件里监听resizekey，当resizekey变化时，图表重绘。

image.png
多个图表挤在一起也同样适用。