原型：

<template>
  <div class="chart">
    <div ref="chartRef" class="chart-bar" :style="{ width, height }"></div>
    <div class="num">{
  { sideText }}</div>
  </div>
</template>
<script lang="ts" setup>
import {
      ref, nextTick, watch } from 'vue';
import * as echarts from 'echarts/core';
import {
     
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  PolarComponent,
} from 'echarts/components';
import {
      BarChart } from 'echarts/charts';
import {
      LabelLayout } from 'echarts/features';
import {
      CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TooltipComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
  LabelLayout,
  TitleComponent,
  PolarComponent,
]);

const props = withDefaults(
  defineProps<{
     
    data: object;
  }>(),
  {
     }
);
const showText = ref('20/20'