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": 11.1 },
  { "Name": "铣床", "PlannedItems": 32, "CompletedItems": 0, "Completion_Rate": 0 },
  { "Name": "磨床", "PlannedItems": 24, "CompletedItems": 0, "Completion_Rate": 0 },
  { "Name": "机加", "PlannedItems": 96, "CompletedItems": 8, "Completion_Rate": 8.3 },
  { "Name": "钳工", "PlannedItems": 68, "CompletedItems": 4, "Completion_Rate": 5.9 }]

function getTableLine(num) {
  var list = [];
  var bottom = 75;//底部位置根据自己要求调整，我的理解是这的值应该设置 grid: { left: 60, right: 60, bottom: 90 }是90减30的一个值,
  var height = 25;
  for (var i = 0; i < num; i++) {
    list.push({
      type: 'line',
      bottom: bottom - i * height,
      right: 60,
      style: {
        fill: '#fff',
        stroke: 'red'
      },
      shape: {
        x1: 0,
        y1: 0,
        x2: 9999,
        y2: 0
      }

    });
  }
  return list;
}
var lineList: any = getTableLine(5);//要渲染几条线写几
lineList.push({
  type: 'line',
  bottom: 0,
  left: 0,
  style: {
    fill: '#fff',
    stroke: 'red'
  },
  shape: {
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 75
  }

});

function initChartCol(data) {
  var chart = echarts.init(document.getElementById('main'), 'shine');
  var xa = [], ya = [], ya1 = [], ya2 = [];
  if (data == null)
    data = [];
  for (var i = 0; i < data.length; i++) {
    xa.push(data[i].Name);
    ya.push(data[i].PlannedItems);
    ya1.push(data[i].CompletedItems);
    ya2.push(data[i].Completion_Rate);
  }

  // 指定图表的配置项和数据
  var option = {
    title: [{
      text: '各工序OTDD达成率',
      x: 'center',
      textStyle: { //设置主标题风格
        /*color: '#00ffff',*///设置主标题字体颜色
      }
    }],
    legend: {
      left: 0,
      bottom: -5,
      width: 35,
      orient: "vertical",
      itemGap: 0,
      textStyle: {
        width: 35,
        height: 25,
        lineHeight: 56,
        overflow: "truncate"
      }
    },
    color: ['#e6b600', '#4cff00', '#c12e34', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487'],
    backgroundColor: 'transparent',
    grid: { left: 60, right: 60, bottom: 150 },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        type: 'category',
        data: xa,
        axisTick: {
          length: 150 // 竖线的长度
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            /*color: 'blue'*/ // 更改坐标轴颜色
          }
        },
        axisLabel: {
          margin: 0,
          interval: 0,
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (value, index) {
            var indexNum = 0
            for (var i = 0; i < xa.length; i++) {
              if (value === xa[i]) {
                indexNum = i
              }
            }
            return ('{table|' + value + '}\n{table|' + ya[indexNum] + '}\n{table|' + ya1[indexNum] + '}\n{table|' + ya2[indexNum] + '%}\n{table|' + '}')
          },
          rich: {
            table: {
              height: 25,
              align: 'center',
              verticalAlign: 'middle'
            }
          }
        }
      }
    ],
    yAxis: [{
      type: 'value',
      boundaryGap: ['0%', '50%'],
      axisLine: {
        lineStyle: {
          type: 'solid',
          /*color: 'blue',*/ //左边线的颜色
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      }

    }, {
      type: 'value',
      min: 0,
      max: 100,
      boundaryGap: ['0%', '20%'],
      axisLine: {
        lineStyle: {
          type: 'solid',
          /*color: 'blue',*/ //左边线的颜色
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed'
        }
      },
      axisLabel: {
        formatter: '{value}%'
      }
    }],
    graphic: lineList, //table
    series: [{
      data: ya,
      name: '计划',
      type: 'bar',
      yAxisIndex: 0,
      label: {
        show: true, position: 'top', formatter: function (params) {
          if (params.value > 0) {
            return params.value;
          } else {
            return '';
          }
        }
      },
      barMaxWidth: 40, // 最大宽度
      itemStyle: {
        emphasis: {
          color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
              ]
          )
        }
      },
    }, {
      data: ya1,
      name: '完成',
      type: 'bar',
      label: {
        show: true, position: 'top', formatter: function (params) {
          if (params.value > 0) {
            return params.value;
          } else {
            return '';
          }
        }
      },
    },
      {
        data: ya2,
        name: '达成率',
        type: 'line',
        yAxisIndex: 1,
        label: { normal: { show: true, position: 'top', formatter: '{c}%' } },
      }]
  };
  chart.clear();
  chart.setOption(option);
}


onMounted(() => {
  initChartCol(data)
})

</script>


<style scoped>
#main {
  height: 400px;
  width: 600px;
}

</style>