nLineCharts.vue

<template>
  <div
    class="ctn-absfull"
    :id="chartId"
    ref="nLineCharts"
    style="width: 100%; height: 100%"
    v-if="parmas"
  ></div>
</template>
<script>
import { nLineCharts } from "@/components/lclEcharts/charts";
// parmas={
//     idName, xData, yData,colorArr, color01, color02, color03
//   }
export default {
  name: "nLineCharts",
  components: {},
  props: {
    nLineChartsParant: {
      type: Object,
    },
  },
  data() {
    return {
      chartId: "nLineCharts",
      parmas: null,
    };
  },
  watch: {
    nLineChartsParant: {
      deep: true,
      handler(newValue, oldValue) {
        let that = this;
        console.log(newValue, oldValue);
        that.chartId = newValue.chartId;
        that.parmas = Object.assign(newValue);
        setTimeout(() => {
          nLineCharts(that.parmas);
        }, 500);
      },
    },
  },

  mounted() {
    let that = this;
    this.$nextTick(function () {
      if (that.parmas) {
        console.log(1);
      }
    });
  },
  methods: {},
};
</script>
<style scoped>
.n-charts {
  width: 100%;
  height: 100%;
}
</style>