echarts 柱状图带底部table表格

m0_64972091

已于 2023-02-06 03:41:05 修改

阅读量1.8k

点赞数 1

文章标签： vue.js

于 2023-02-03 00:03:52 首次发布

本文链接：https://blog.csdn.net/m0_64972091/article/details/128859487

版权

<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 },