在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 >
    // 避免切換路由時圖表消失
    const chart = ref(`eChart${Date.now()}${Math.random()}`) 
    const el = document.getElementById(chart.value) as HTMLElement
</script>

<style scoped >
.echarts
  width 95%
  height 100%
</style>
           

最終效果圖如下

 希望能幫助到你！ 加油~