Vue3 parent component uses props to pass values to child components to redraw echarts charts

At present, most of the ways to realize this small requirement on the Internet are written in vue2, update a way of written in vue3, and use the setup function

Parent component pass value or normal pass

 Subcomponent code, vue3+setup

<template>
    <div class="echarts_class">
      
      <div id="bar" :style="{  width:'280px',height: '200px'}">
        
      </div>
      
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  import {onUnmounted, onMounted, reactive, watch } from 'vue'
  
  export default {
    props: {
        weekNumbr: {   // 柱状图数据
            type: Array,
            default() {
                return []
            }
        },
        xAxis: {   // 柱状图x轴
            type: Array,
            default() {
                return []
            }
        },
    },
    //setup能接收到两个参数，第一个就是props
    setup(props) {
      //echarts图表的基本数据
      const info = reactive({
        options:{
          xAxis: {
                type: 'category',
                data: props.xAxis,
                axisTick: {
                    show: false
                }, 
            },
            yAxis: {
                type: 'value',
                splitLine:{
                    show:false
                },
                show:false
            },
            series: [
                {
                data: props.weekNumbr,
                type: 'bar',
                barWidth: '45%',
                itemStyle:{
                    color:'#1FD286',
                    borderRadius: 4
                }
                }
            ]

        }
      })
      
      /// 声明定义一下echart
      let echart = echarts;
      
      onMounted(() => {
        initChart();
      });
  
      onUnmounted(() => {
        echart.dispose;
      });
      
      // 基础配置一下Echarts
      function initChart() {
        let chart = echart.init(document.getElementById("bar"), "#000");
        // 把配置和数据放这里
        chart.setOption(info.options)
        window.onresize = function() {
            //自适应大小
            chart.resize();
        };
      }
      //监听父组件数据变化，重绘echarts图表，可以在父组件写个++功能试试
      watch([props.weekNumbr,props.xAxis],() => {
          initChart()
          // alert('监听到了'),
          // console.log(newVal,oldVal);
          //console.log("info中的内容是",props);

      })
        //return定义的函数，变量
        return { info, initChart };
          }
  
  }
  
  </script>
    
  <style scoped>
    .echarts_class{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        /* position: relative; */
    }
    
  </style>
  

renderings

 

 The static data of the parent component can be realized. When the asynchronous interface of the parent group component obtains data, it may cause the problem that the image cannot be drawn. At that time, it is necessary to make a judgment to make sure that the props data is obtained before rendering, which is not reflected in the current code.