Le composant parent Vue3 utilise des accessoires pour transmettre des valeurs aux composants enfants afin de redessiner les graphiques echarts

À l'heure actuelle, la plupart des façons de réaliser cette petite exigence sur Internet sont écrites en vue2, mettent à jour une manière d'écrire en vue3 et utilisent la fonction de configuration

Valeur de passage du composant parent ou passage normal

 Code sous-composant, 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>
  

rendus

 

 Les données statiques du composant parent peuvent être réalisées. Lorsque l'interface asynchrone du composant du groupe parent obtient des données, cela peut entraîner le problème que l'image ne peut pas être dessinée. À ce moment, il est nécessaire de porter un jugement pour s'assurer que les données d'accessoires sont obtenues avant le rendu, ce qui n'est pas reflété dans le code actuel.