2021-06-08

用el-table作为echarts的y轴同时自适应高度

记录一下自己在用echarts时候的探索，说的不一定对，防止以后忘记了

1. el-table的使用
我用的是vue+ts的模式

<el-table :data="tabledata"  border :span-method="objectSpanMethod" :row-style="heightTr" style="width:25%;" >
   <el-table-column label="员工" prop="name" />
   <el-table-column label="工序" prop="procedure"/>
</el-table>

表格data :tabledata变量
:span-method : 自带的一个表格行操作的函数
:row-style : 表格所有行的一个整体自定义样式，返回值为Object

2. echarts的使用

<v-chart class="chart" :autoresize="true" :options="option" ref="chartClick" style="width:75%;height:300px" />

因为用的是vue，所以用v-chart引入，option里用的是echarts里面的option

4. 两个的高度结合

grid: {
          top:'13%',
          left: "1%",
          right: "5%",
          bottom:'7%'
       	},

由于我设置的v-chart高度是300px（默认是400px），除去top，bottom 只剩下80% 作为主体，所以实际为300*80%=240px；

function heightTr(){//计算table每行的高度，已知grid百分比 echart=300px
      let h = 240/tabledata.value.length;//tabledata.value.length是纵坐标的类别数量
      return {height:h+'px'}
    }

这个函数是写在el-table里的:row-style，这样就能动态对齐，不果有可能表格和图的起点线不一样，table的样式需要margin-top一下，手工对齐。
最后效果：

大概长这样吧，图片没有截全。

以上只是菜鸡本人的探索！走了，又要探索去了。。