echarts 组件传值需要深度监听 watch----折线图

<template>
  <div id="line1" style="width: 100%; height: 220px"></div>
  <!-- 这里宽度随父级 -->
</template>

<script>
export default {
  data() {
    return {
      options: {},
      chartOne: null,
    };
  },
  props: {
    adata: {
      type: Object, //接收父组件传来的数据
    },
  },
  mounted() {
    this.initChart(); //在挂载完成后初始化echart
  },
  methods: {
    initChart() {
      // 初始化echart
      this.chartOne = this.$echarts.init(
        document.getElementById("line1"),
        null,
        { renderer: "svg" }
      ); //init()挂载在某个元素，所以还需要在mounted调用 { renderer: "svg" } 将原来的canvas绘图改为svg 清晰度更高
      this.draw();
    },
    draw() {
      this.chartOne.setOption(
        {
          tooltip: {
            trigger: "axis",
          },
          color: ["#007aff"], //圆圈的颜色
          legend: {
            right: "20",
            data: ["用户数"], //要与series 的name 对应
            icon: "circle", //图形形状
            textStyle: {
              fontSize: 16,
              color: "#fff",
            },
          },
          grid: {
            //整个图的左右上下间距
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: this.adata.Date, //x轴数据(数组)
            axisLine: {
              show: true, //是否显示x轴
              onZero: false,
              lineStyle: {
                color: "#fff",
              },
            },
            nameTextStyle: {
              align: "center",
            },
          },
          yAxis: {
            type: "value",
            axisLabel: {  
              formatter: "{value}", //鼠标移入的提示信息框
            },
            axisLine: {
              onZero: true,
              lineStyle: {
                color: "#fff",
              },
            },
            min: (value) => {
              return value.min;
            },
            max: (value) => {
              return value.max;
            },
          },
          series: [
            {
              name: "用户数",
              type: "line",
              data: this.adata.Cnt, //y轴数据(数组)
              lineStyle: {
                color: "#007aff",  //折线的颜色
              },
            },
          ],
        },
        true
      );
    },
  },
  watch: {
  //*****监听的是请求数据后父组件传来的值，通过handler函数执行的数据改变后的具体方法
    adata: {  
      handler() {
        this.draw();
      },
       //深度监听，保证数据实时变化
      deep: true, 
    },
  },
};
</script>