vue+Echarts动态数据已经赋值，但是无法渲染页面的问题

vue+Echarts动态数据已经赋值，但是无法渲染页面的问题

正常的给个div的大小

 <div>
    <div id="echartss" :style="{width: '100%', height: '600px'}"></div>
  </div>

 接下来是option部分：

 echarts1_option:{
            backgroundColor: '#45515a', //背景颜色
            //标题
            title: {
              text: '订单中保险公司所占的比例',
              subtext: '饼图示例',
              left: 'center',
              top: 20,
              textStyle: {
                color: '#ccc',
                fontStyle: 'italic'//标题字体
              }
            },
            //弹窗，响应鼠标指向，显示具体细节
            tooltip : {
              trigger: 'item',//以具体项目触发弹窗
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            //图例，选择要显示的项目
            legend:{
              orient:'vertical',
              left:'left',
              textStyle:{
                color:'#c8c8d0'
              },
              data:['安心','安盛天平','中华联合保险','中国太平洋保险','中国人保财险','平安车险']  //注意要和数据的name相对应
            },
            //工具箱
            toolbox:{
              show:true,//显示工具箱
              feature:{
                dataView:{show:true}, //以文字形式显示数据
                restore:{show:true},   //还原
                //dataZoom:{show:true}, //区域缩放
                saveAsImage:{show:true},  //保存图片
                //magicType:{type:['line','bar']}//动态数据切换，数据显示可以在该规定内容中切换显示方式，
              }
            },
            /*//视觉映射组件，将数据映射到视觉元素上
            visualMap: {
              show: false,
              min: 1,
              max: 2,
              dimension: 0, //选取数据的维度，如人数据：[身高，体重]，则1代表将体重进行映射，默认值为数组的最后一位
              // seriesIndex: 4, //选取数据集合中的哪个数组，如{一班}，{二班}，默认选取data中的所有数据集
              inRange: {
                //选定了要映射的对象，用inRange详细写要渲染的具体细节，[x，y]中x指最小值对应的量（亮度，饱和度等），y指最大值对应的量，其余的按各自value线性渲染
                color:['red'],
                colorLightness: [0,1],
                colorSaturation:[0,1]
              }
            },*/
            //数据
            series : [
              {
                name: '成交数量',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data:[

                ].sort(function (a, b) {
                  return a.value - b.value;
                }),

                roseType: 'radius',//角度和半径展现百分比，'area'只用半径展现
                label: { //饼图图形的文本标签
                  normal: {  //下同，normal指在普通情况下样式，而非高亮时样式
                    textStyle: {
                      color: 'rgba(255, 255, 255, 0.3)'
                    }
                  }
                },
                labelLine: {  //引导线样式
                  normal: {
                    lineStyle: {
                      color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.5, //0-1，越大越平滑弯曲
                    length: 10,  //从块到文字的第一段长
                    length2: 20  //拐弯到文字的段长
                  }
                },

                itemStyle: { //图例样式
                  normal: {
                     //color: '#97413c',
                    shadowBlur: 50,//阴影模糊程度
                    shadowColor: 'rgba(0, 0, 0, 0.5)',//阴影颜色，一般黑

                  }
                },
                animationType: 'scale', //初始动画效果，scale是缩放，expansion是展开
                animationEasing: 'elasticOut', //初始动画缓动效果
                animationDelay: function (idx) {  //数据更新动画时长，idx限定了每个数据块从无到有的速度
                  return Math.random() * 200;
                }


              }
            ],
            color: ['#97858c','pink','green','yellow','orange','#97813c'],
          },

接下来看init代码

init(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('echartss'))
          // 绘制图表，this.echarts1_option是数据
          myChart.setOption(this.echarts1_option,true)
        },

然后是给动态数据赋值代码（从后台接口取得的数据）

 drawline() {
          // 数据初始化
          API.account.getAccount().then(({data}) => {
            if (data && data.code == 0) {
              this.echarts1_option.series[0].data=data.data.list;
            } else {
              this.$Message.error(data.msg);
            }
          }).catch((data) => {
            this.$Message.error('连接失败，请检查网络！');
          });

        },

到目前为止，页面的结果是：

页面完全没有效果：
在加上下面代码后：

//数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
    watch: {
      //观察option的变化
      echarts1_option: {
        handler(newVal, oldVal) {
          if (this.myChart) {
            if (newVal) {
              this.myChart.setOption(newVal);
            } else {
              this.myChart.setOption(oldVal);
            }
          } else {
            this.init();
          }
        },
        deep: true //对象内部属性的监听，关键。
      }
    },

我们再看看运行结果：

数据虽然刷新了，但是我们的Echart’s组件却不知道，必须有个watch过程。