在Ant Design表格里添加echarts 图表

               在tab表格里添加图表，首先是把echarts图表封装成组件，然后给要放置图表的那一列设置宽高（重点）传递表格内的数据给到图表组件进行渲染就行了，代码如下。

        <a-table
          :columns="GradeColumns"
          :data-source="applicationData"
          :show-sorter-tooltip="false"
          :loading="gradeLoading"
          class="custom-table custom-scroll"
          :pagination="tablePagination"
          @change="changePage"
        >
          <template #bodyCell="{ column, record }">
            //重点-----设置宽高 放置组件 完成
            <template v-if="column.key === 'linepicture'">
              <div style="width: 60px; height: 40px;">
            //图表组件
                <Linepicture
                  :tab-data="record.application"
                  :sign="'tab'"
                />

              </div>
            </template>
            <template v-if="column.key === 'operation'">
              <a @click="openModal(record)">详情</a>
            </template>
          </template>
        </a-table>

在封装图表组件的时候，装图标的div盒子id名尽量设置为动态的，可以避免首次进入页面图表正常展示，切换路由时图表消失的问题，代码如下

<template>
  <div
    :id="chart"
    class="echarts"
  />
</template>

<script setup lang="ts">
    // 避免切换路由时图表消失
    const chart = ref(`eChart${Date.now()}${Math.random()}`) 
    const el = document.getElementById(chart.value) as HTMLElement
</script>

<style scoped lang="stylus">
.echarts
  width 95%
  height 100%
</style>

最终效果图如下

 希望能帮助到你！ 加油~