动态化echarts数据和遇到的问题

根据项目需求，完成echarts柱状图数据动态化
效果图：
使用的例子是
在此就不重复说明安装echarts了，我是用的是echarts的懒加载（关于echarts的懒加载，在另一篇的文章中有提到，在这儿我直接上代码了）

//引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
//引入柱状图图表，图表后缀都为 Chart
import {
  BarChart,
  LineChart,
  PieChart,
  MapChart,
  PictorialBarChart,
  RadarChart,
  ScatterChart,
} from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  AriaComponent,
  ParallelComponent,
  LegendComponent,
  RadarComponent,
  ToolboxComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  GraphicComponent,
  LegendComponent
} from "echarts/components";

//引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
//标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";

// 注册必须的组件
echarts.use([
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  AriaComponent,
  ParallelComponent,
  BarChart,
  LineChart,
  PieChart,
  MapChart,
  RadarChart,
  PictorialBarChart,
  RadarComponent,
  ToolboxComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  GraphicComponent,
  ScatterChart,
  CanvasRenderer,
  LabelLayout,
  UniversalTransition,
]);


// 导出
export default echarts;

然后在要使用echarts页面中导入这个方法即可，
首先你要明白你替换数据的格式，然后将你的数据变成相关的格式，比如我替换的是


这三个部分，相对较为麻烦的是series的替换，我是把它整个数据都替换了

然后在渲染echarts的时候，要注意，渲染的容器id是否一致并且要给容器宽和高

因为我是使用vue3，语法糖seted自带created，所以，在调用封装方法要放在nextTick或者onMounted，我是在获取完数据后使用nextTick调用

在我渲染的时候遇到的问题，我自定义的变量，使用的是shallowRef，打印出来也是有数据的，但是echarts渲染上就是没数据，用watch监听也是空数组，之后把shallowRef改成reactive就行了，也不清楚是什么问题。