vu3监听父组件传值给封装的子组件Echarts, 避免初始化Echarts后的二次渲染

Chan_7511

已于 2023-06-21 10:08:20 修改

阅读量151

点赞数 1

文章标签： javascript vue

于 2023-06-21 09:56:54 首次发布

本文链接：https://blog.csdn.net/m0_74309113/article/details/131321872

版权

// 父组件传参
<template>
 <div>
    <histogram id="histogram" :data="data"></histogram>
 </div>
 
<script setup>
import { ref, onMounted } from "vue";
// 定义子组件获取的值[时间，参数]
const data= ref([['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],[120, 100, 150, 80, 70, 110, 130]])
 
// 挂载时获取请求回来的数据赋值给data
</script>
 
 
 
 
 
// 子组件接收
<script setup>
import { onMounted , ref , watch } from 'vue'
const props = defineProps({
  //子组件接收父组件传递过来的值
  data: Array,
})
 
// 通过监听父组件获取网络请求后传来的值，再去渲染Echarts
watch(()=>props.doctorData , (newVal,oldVal) => {
 
  // console.log('新',newVal,'旧',oldVal)
  option.xAxis.data = newVal[0]
  option.series.data = newVal[1]
 
  initeCharts()
})
 
 
const initeCharts = () => {
  const myChart = echarts.init(document.getElementById(''))
  // 绘制图表
  myChart.setOption(option)
} 
 
</script>

代码简洁，望理解。希望帮到大家！