vue采坑记之echarts动态数据刷新

需求是数据发生变化echarts会立即刷新，我将data设置未动态的

请求数据成功之后，将数据插入到investmentnum里面，但是后来发现数据虽然插入成功，但是echarts图却没有变化，所以我猜想是echarts没有刷新

接下来进行填坑

用watch 监听data的变化，数据发生变化时重新初始化echarts图

 watch: {
    //观察data的变化
    investmentnum: {
      handler (newVal, oldVal) {
        if (this.chart) {
          for (let i = 0; i < this.investmentnum.length; i++) {
            if (oldVal[i] != newVal[i]) {
              this.option = {
                //echarts
                tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                  right: 'right',
                  // data: ['金额'],
                  data: [{name:'金额',textStyle:{color:'#4a78e8'}}
                  ]
                },
                xAxis: {
                  type: 'category',
                  name: 'x',
                  splitLine: {show: false},
                  data : this.weektime,
                  //设置坐标轴字体颜色
                  axisLine: {
                    lineStyle: {
                      color: '#4a78e8',
                      width: 1,//这里是为了突出显示加上的
                    }}
                },
                grid: {
                  left: '1%',
                  right: '1%',
                  bottom: '3%',
                  containLabel: true
                },
                yAxis: {
                  type: 'value',
                  name: '   金额 (万元)',
                  splitLine: {
                    lineStyle: {
                      // 使用深浅的间隔色
                      color: ['#60bee9']
                    }
                  },
                  nameTextStyle: {
                    color: ['#4a78e8']
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#4a78e8',
                      width: 1,//这里是为了突出显示加上的
                    }
                  },
                  axisLabel: {
                    color: "#7e8c8d" //刻度线标签颜色
                  },
                  min: 0
                },
                series: [
                  {
                    name: '金额',
                    type: 'line',
                    smooth: true,
                    data: this.investmentnum,
                    itemStyle : {
                      normal : {
                        color:'#4a78e8',
                        lineStyle: {
                          color:'#4a78e8'
                        },
                        label: {
                          show: true
                        }
                      }
                    }
                  }
                ]
              }
              this.chart.setOption(this.option)
            }
          }
        } else {
          this.init()
        }
      },
      deep: true //对象内部属性的监听，关键。
    }

以下是我自己渲染出来的图，有什么问题欢迎留言