echarts 柱状图带底部table表格

<template>
  <div id="main">
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted} from "vue";

var data = [
    { "Name": "xxx", "PlannedItems": 5, "CompletedItems": 30, "Completion_Rate": 10 },
  { "Name": "yyy", "PlannedItems": 77, "CompletedItems": 55, "Completion_Rate": 22 },
  { "Name": "CBU", "PlannedItems": 0, "CompletedItems": 0, "Completion_Rate": 0 },
  { "Name": "TE", "PlannedItems": 0, "CompletedItems": 0, "Completion_Rate": 0 },
  { "Name": "AE", "PlannedItems": 68, "CompletedItems": 4, "Completion_Rate": 5.9 },
  { "Name": "ME", "PlannedItems": 0, "CompletedItems": 0, "Completion_Rate": 0 },
  { "Name": "DBU", "PlannedItems": 0, "CompletedItems": 0, "Completion_Rate": 0 },
  { "Name": "车床", "PlannedItems": 4, "CompletedItems": 4, "Completion_Rate": 100 },
  { "Name": "线割", "PlannedItems": 36, "CompletedItems": 4, "Completion_Rate":