初次使用echart图表遇到的问题

今天在完成毕设的过程当中遇到了一个eachart图表动态获取数据的问题，开始我是按照eachart图表官网进行书写，像如下这种：

bar () {
      let myChart = this.$echarts.init(this.$refs.bar)
      let  option{
					//设置标题,副标题,以及标题位置居中
					title: {
						text: '书籍统计统计(饼状图)',
						//subtext: '纯属虚构',
						x: 'center'
					},
					//具体点击某一项触发的样式内容
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					//左上侧分类条形符
					legend: {
						orient: 'vertical',
						left: 'left',
						//通过跨域获取数据给data赋值
						data: []
					},
					//饼状图类型以及数据源
					series: [
						{
							name: '统计数量',
							type: 'pie',
							//radius: '70%',
							//center: ['50%', '60%'],
							//通过跨域获取数据给data赋值
							data: [],
							//设置饼状图扇形区域的样式
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
						}
					]
				};
        myChart.setOption(option)
    },

我的数据在data中,我想直接在option中直接进行访问，可是失败了，我就想到应该是this指向问题，所以我在bar函数的全局中将this进行一个中转，此刻我认为应该可以了，结果

结果可想而知不行，此时我只能去网上查找答案，结果解决了，代码如下：

bar () {
      this.myChart = this.$echarts.init(this.$refs.bar)
      this.myChart.setOption({
					//设置标题,副标题,以及标题位置居中
					title: {
						text: '书籍统计统计(饼状图)',
						//subtext: '纯属虚构',
						x: 'center'
					},
					//具体点击某一项触发的样式内容
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					//左上侧分类条形符
					legend: {
						orient: 'vertical',
						left: 'left',
						//通过跨域获取数据给data赋值
						data: []
					},
					//饼状图类型以及数据源
					series: [
						{
							name: '统计数量',
							type: 'pie',
							//radius: '70%',
							//center: ['50%', '60%'],
							//通过跨域获取数据给data赋值
							data: [],
							//设置饼状图扇形区域的样式
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
						}
					]
				});
    },
async getbookinfo(){
      this.$axios({         //数据有点乱后台没处理
      url:"/books/pull",
    }).then((res)=>{
      if (res.data) {
        const a=[];
        const b=[];
        for (let index = 0; index < res.data.length; index++) {
          a.push(res.data[index].sort)
          b.push(res.data[index].sort)
        }
        for (let i = a.length-1;i>=0; i--) {
          const node=a[i]
          for (let j = 0; j <i; j++) {
            if (node==a[j]) {
              a.splice(i,1);
              break;
            }
          }
        }
        for (let k = 0; k < a.length; k++) {
          var num=0;
          this.data1.push(a[k])
          for (let index = 0; index < b.length; index++) {
            if (a[k]==b[index]) {
              num++;
            }
          }
          const da={value:num,name:a[k]}
          this.data.push(da)
        }
        //然后再给饼状图赋值
					this.myChart.setOption({
						legend: {
							data: this.data1,
						},
						series:[{
								data: this.data,
							}]
					});
          
      }
    })
    }

 它是先将图表的配置对象中的动态属性做了初始化，后通过myChart对象的setOption方法设置动态数据，运行结果：

至于前一种方法为啥不行我也不太清楚，还望有兄弟能解解惑