vue3中使用echarts的子组件接收父级传来参数，并重新渲染 watch监听的用法

1、父组件页面：

<template>
<div class="heightChart">
 <height-chart :myEchart="equipmentReal.echartsData[0]" />
  <div>高度(m)</div>
</div>
</template>
<script setup>
import heightChart from "./echarts/heightChart.vue"
 
const props = defineProps({
  equipmentReal: {
    type: Object,
    default: function () {
      return {};
    },
  },
  echartsData: {
    type: Array,
    default: function () {
      return [];
    },
  }
});
console.log("echartsData-1",props.equipmentReal.echartsData);
</script>复制

2、echarts的子组件：

<template>
<!-- {{myEchart}} -->
  <div id="main" ref="chartBox"></div>
</template>
<script setup>
import { parseInt } from "lodash-es";
//接受父级传来的值
const props = defineProps({
  myEchart: {
    type: Object,
    default: function () {
      return {};
    },
  }
});
//监听父级传来的值并赋值
let echartVal = ref(0)
watch(
  () => props.myEchart,
  (newVal) => {
    if (newVal) {
      console.log("echartsData-2",newVal.value);
      if(newVal.value != undefined){
        let echartValue = parseInt(newVal.value)
        // console.log("echartsData-3",typeof(echartValue));
        echartVal.value = echartValue
      }
      onMounted(() => {
        console.log("echartsData-3",echartVal.value);
        const category = [
          {
            name: "高度",
            // value: 612.5,
            // TODO 改为动态获取数据
            value:echartVal.value
          },
        ]; // 类别
        init();
      });
    }
  },
  { immediate: true, deep: true }
);
 
 
 
 
let echarts = inject("echarts"); // 主要
 
onBeforeUnmount(() => {
  chartBox.value = null;
  machart.value = null;
  clearInterval(timer.value);
  timer.value = null;
});
// 基本柱形图
const chartBox = ref(null);
const machart = ref(null);
const timer = ref(null);
 
const category = [
  {
    name: "高度",
    // value: 612.5,
    // TODO 改为动态获取数据
    value:echartVal.value
  },
]; // 类别
const total = 2500; // 数据总数
 
function init() {
  machart.value = echarts.init(document.getElementById("main")); // 主要
  const option = {
    // backgroundColor: "#071347",
    grid: {
      top: 10,
      bottom: 5,
    },
    xAxis: [
      {
        type: "category",
        inverse: false,
        data: category,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
    ],
 
    yAxis: [
      {
        max: total,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        // 内
        type: "bar",
        barWidth: 127.5,
        silent: true,
        itemStyle: {
          normal: {
            color: "rgba(17, 202, 165, 0.6)",
          },
        },
        label: {
          normal: {
            formatter: function (params) {},
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
            position: "top",
            // distance: 20, // 向右偏移位置
            show: true,
          },
        },
        data: category,
        z: 3,
        // animationEasing: "elasticOut",
      },
 
      {
        // 分隔
        type: "pictorialBar",
        itemStyle: {
          normal: {
            color: "rgba(19, 67, 106, 0.8)",
            // 00BF99
            opacity: 0.5,
          },
        },
        symbolRepeat: "fixed",
        //   symbolMargin: 2,
        symbol: "rect",
        symbolClip: true,
        symbolSize: [130, 8],
        symbolPosition: "start",
        symbolOffset: [-5, -4],
        symbolBoundingData: total,
        data: [total - 30],
        z: 2,
        animationEasing: "elasticOut",
      },
 
      {
        name: "外框",
        type: "bar",
        barGap: "-101.5%",
        data: [total],
        barWidth: 130, // 设置外框粗细
        itemStyle: {
          normal: {
            barBorderRadius: [5, 5, 5, 5],
            color: "rgba(19, 67, 106, 0.5)", // 填充色
            barBorderColor: "#11CAA5", // 边框色
            barBorderWidth: 1, // 边框宽度
            shadowColor: "#00BF99",
            shadowBlur: 15,
            shadowOffsetX: 1,
            shadowOffsetY: 1,
          },
        },
        z: 0,
      },
    ],
  };
  // 定时改变echarts的值
  timer.value = setInterval(function () {
    let num = Math.ceil(Math.random() * (1700 - 600) + 600);
    // option.xAxis[0].data = [num]
    option.series[0].data = [
      {
        name: "高度",
        // value: num,
        // TODO 改为动态获取数据
        value:echartVal.value
      },
    ];
    machart.value.setOption(option, true);
  }, 3000);
  machart.value.setOption(option, true);
  window.addEventListener("resize", function () {
    machart.value.resize();
  });
}
</script>
<style lang="scss" scoped>
#main {
  width: 100%;
  height: 100%;
  // transform:skew(-5deg,0deg) rotate(-2deg)
}
</style>
 复制