vue 父组件给子组件传值监听

<template>
  <div class="pie-pic" ref="piePic"></div>
</template>

<script>

export default {
  name: "PiePic",
  props: ['piePicOption'],
  data(){
    return {
        chartInstance: null,
        piePicData: {}
    }
  },
  mounted() {
    // this.drawChart()
    this.initChart();
    this.getData();
   
    // this.screenAdapter();
    window.addEventListener("resize", this.screenAdapter);
  },
  
  computed(){
   
    this.$watch('piePicOption.totalNum', function (newVal, oldVal) {
      this.initChart();
      this.getData();
    })
  },
  //监视
  watch: {
    piePicOption: {
      handler() {
         this.initChart();//调用实例化对象的方法
         this.getData();
      },
      deep: true,
    },
  },
  destroyed(){
    // 组件销毁时清除窗口监听事件
    window.removeEventListener('resize',this.screenAdapter)
  },
  methods: {
    // 初始化echarts实例化对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.piePic);
      // 图表初始化配置
      let initOption = {
        angleAxis: {
          clockwise: true, // 顺时针
          startAngle:270,
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          type: "category",
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        polar: {
          center: ["50%", "50%"],
          radius: "140%", //图形大小
        },
        series: [
          {
            type: "bar",
            coordinateSystem: "polar",
            roundCap: true,
            barWidth: 12,
            barGap: "-100%", // 两环重叠
            radius: ["49%", "52%"],
            z: 2,
          },
          {
            // 灰色环
            type: "bar",
            coordinateSystem: "polar",
            roundCap: true,
            barWidth: 12,
            barGap: "-100%", // 两环重叠
            radius: ["48%", "53%"],
            z: 1,
            silent: true,
          },
          {
            name: "From",
            type: "pie",
            radius: "50%",
            color: ["#fff"],
            // hoverAnimation: false,
            silent: true,
            label: {
                show: true,
                position: 'center',
                color:'#4c4a4a',
                rich: {
                    total:{
                        fontSize: 22,
                        fontFamily : "微软雅黑",
                        color:'#454c5c',
                        lineHeight:30
                    },
                    active: {
                        fontFamily : "微软雅黑",
                        fontSize: 12,
                        color:'#6c7a89',
                        lineHeight:20,
                    },
                },
            },
            itemStyle: {
              shadowBlur: 6,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: '#c0c0c0'
            },
            data: [{ value: 100 }],
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    // 获取数据
    getData() {
      this.piePicData = this.piePicOption; // 模拟获取数据流程
      this.updateChart();
    },
    // 更新图表
    updateChart() {
      // 对传递进来的数据进行结构，方便使用
      let { totalNum, currentNum, startColor, endColor, description, unit} = this.piePicData;
      let dataOption = {
        angleAxis: {
          max: totalNum, // 满分
        },
        series: [
          {
            data: [
              {
                value: currentNum,
                itemStyle: {
                    color: {
                      type: "linear", // 设置线性渐变相关属性
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: endColor,
                        },
                        {
                          offset: 1,
                          color: startColor,
                        },
                      ],
                    },
                },
              },
            ],
          },
          {
            // 灰色环
            data: [
              {
                value: totalNum,
                itemStyle: {
                  color: "#F2F2F2",
                },
              },
            ],
          },
          {
            label: {
                formatter: `{total|${currentNum}/${totalNum}}\n\r{active|${description}}\n{active|${unit}}`,
            },
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    // 监听浏览器改变进行屏幕适配
    screenAdapter(){
        // 图表内文字相关适配
        let titleFontSize = this.$refs.piePic.offsetWidth / 100 * 8
        console.log('kkk',titleFontSize)
        let adapterOption = {
        series: [
          {
            barWidth: titleFontSize / 2,
          },
          {
            barWidth: titleFontSize / 2,
          },
          {
            label: {
                rich: {
                    total:{
                        fontSize: titleFontSize,
                        fontFamily : "微软雅黑",
                        color:'#454c5c',
                        lineHeight:titleFontSize * 1.5
                    },
                    active: {
                        fontFamily : "微软雅黑",
                        fontSize: titleFontSize / 2,
                        color:'#6c7a89',
                        lineHeight:titleFontSize,
                    },
                },
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    },
  },
};
</script>

<style scoped lang="scss">
.pie-pic {
  height: 100%;
  width: 100%;
}
</style>