20180703_vue解决深层嵌套对象某些属性更新问题

vue解决深层嵌套对象某些属性更新问题

data(){
  return {
    chart1:{},//如实例化后的echarts对象
    options1: {},//chart的配置项，页面操作会修改配置项数据重新绘制echart
  }
},
methods:{
  handerChange () {
      // 做其他操作修改相关数据
      this.options1 = Object.assign({}, this.options1, {
          xAxis: {
              data: ['Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
          }
      })
      // 清空图表
      this.chart1.clear()
      this.$nextTick(function () {
          // 需等options1更新后才生成图表 注意这里的nextTick
          // 重新生成图表
          this.chart1.setOption(this.options1)
      })
  },
  initChart () {
    this.chart1 = echarts.init(document.getElementById('chart1'))
    this.option1 = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }]
    };
    this.chart1.setOption(this.options1)
  }  
}

openks / learn-vue

20180703_vue解决深层嵌套对象某些属性更新问题 #112