需要在table里面加入柱状图，技术：el-table+echart+前端分页

问题难点：

难点在于因为是前端分页，所以刚开始数据是全部拿到的，而如果刚开始图表全部渲染出来，会导致除第一之外的数据，渲染的时候找不到要放置的dom，所以就需要把数据提前切割完成

实现如下图所示的效果

代码如下（省略部分代码）

                   <div class="tables">
                        <el-table border :data="currentData" stripe style="width: 100%">
                            <el-table-column :prop="tc" :label="tc" v-for="(tc,index) in tableColumn" :key="index">
                            </el-table-column>
                            <el-table-column label="count by reorderlevel" align='center'>
                                <template slot-scope="scope">
                                    <div style="height: 200px;" :id="'echarts'+scope.row.id"></div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination layout="prev, pager, next,sizes,jumper" :current-page="currentPage" :page-size="pageSize" :page-sizes="[5,10, 20, 50]" @size-change="handleSizeChanges" @current-change="handleCurrentChanges" :total="total" align='right' background style="margin-top:10px">
                        </el-pagination>
                    </div>

  handleSizeChanges (val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.enrichedTablePage()
        },
        handleCurrentChanges (val) {
            this.currentPage = val;
            this.enrichedTablePage()
        },
        // 带图表表格
        enrichedTableType (resp) {
           
            //数据处理代码省略。。。
            this.enrichedTablePage()
        },
 pageDataFn (number, pageSize, data) {
            const pageData = [];
            let start = (pageSize * number) - pageSize;
            let end = pageSize * number;
            end = end > data.length ? data.length : end;
            for (let i = start; i < end; i++) {
                pageData.push(data[i])
            }
            return pageData;
        },
  enrichedTablePage () {
            this.currentData = this.pageDataFn(this.currentPage, this.pageSize, this.tableData)
            this.currentData.forEach((e) => {
                const options = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: e.rData,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: e.cData,
                            type: 'bar'
                        }
                    ]
                };
                this.$nextTick(() => {
                    let percentChart = echarts.init(document.getElementById('echarts' + e.id));
                    percentChart.setOption(options);
                });
            });
        }