echarts 柱状图带底部table表格

m0_64972091

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

阅读量2k

点赞数 1

文章标签： vue.js

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

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

版权

本文详细介绍了如何在Vue.js项目中利用Echarts库生成柱状图，并与底部表格进行数据联动，展示更丰富的信息。通过实例代码，展示了如何配置Echarts图表及如何将图表数据同步到表格中，实现数据可视化与交互效果。

摘要由CSDN通过智能技术生成

<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":