bb里面的for循环为什么会报data的错，第一次点击bb可以执行 第二次就不行了

Question

<template>

<divstyle="display:flex;margin-top:130px">

<divstyle="margin:0 100px;height:600px;overflow-y:auto">

<el-form :model="BIform"style="display:flex;flex-wrap: wrap;display:inline-block">

<el-form-itemlabel="BI名称"label-width="100px">

<el-inputstyle="width:300px"v-model="BIform.name" @input=""autocomplete="off"></el-input>

</el-form-item>

<el-form-itemlabel="formID"label-width="100px">

<el-inputstyle="width:300px"v-model="BIform.id"autocomplete="off" :disabled="true"></el-input>

</el-form-item>

<el-form-itemlabel="系列数量"label-width="100px">

<el-input-numberstyle="width:300px"v-model="BIform.num" @change="handleChange" :min="1"label=""></el-input-number>

</el-form-item>

<divv-for="(item,index) inBIform.num">

<el-form-item  :label ="`${'系列名称'+ item}`"label-width="100px">

<el-inputstyle="width:300px"placeholder="输入系列名称"v-model="list[index].name" @input=""autocomplete="off"></el-input>

</el-form-item>

<el-form-item :label ="`${'系列内容'+ item}`"label-width="100px">

<el-inputstyle="width:300px"placeholder="输入系列类容，“  、”分隔"v-model="list[index].data" @input=""autocomplete="off"></el-input>

</el-form-item>

</div>

<el-form-itemlabel="类目文本标签"label-width="100px">

<el-inputstyle="width:300px"placeholder="输入类目文本标签，“  、”分隔"v-model="BIform.labels" @input=""autocomplete="off"></el-input>

</el-form-item>

</el-form>

<br/>

<el-button @click="bb"type="primary">运行</el-button>

</div>

<div>

<!-- BI数据展示 -->

<divid="myChart" :style="{width:'1000px', height:'600px', margin:' 0 auto '}"></div>

</div>

</div>

</template>

<script>

exportdefault {

data(){

return {

BIform:{

name:"测试1",

id:'',

num:1,

labels:"",

            },

seriesForm:{

data:'',

name:'',

type:'bar', 

markPoint: {  

data: [  

                    {type:'max', name:'最大值'},  

                    {type:'min', name:'最小值'}  

                    ]  

                },  

markLine: {  

data: [  

                    {type:'average', name:'平均值'}  

                   ]  

                } 

            },

aa:[],

list:[{name:'蒸发量',type:'bar',

data:"",//[2.0、4.9、7.0、23.2、25.6、76.7、135.6、162.2、32.6、20.0、6.4、3.3],

markPoint : {

data : [

                        {type :'max', name:'最大值'},

                        {type :'min', name:'最小值'}

                        ]

                    },

markLine : {

data : [

                        {type :'average', name:'平均值'}

                    ]

                }

            },],

legendName:[],

BIlist:[]

        }

    },

mounted(){

setInterval(() => {

//  执行echarts方法

this.draw();

      },500);

  },

created(){

this.BIform={

name:"测试",

id:'',

num:1 ,

labels:"",

      }

setTimeout(()=>{

this.newId()

      },800)

  },

methods:{

bb(){

this.BIlist = this.list

this.aa = this.BIform.labels.split("、")

this.legendName = this.list.map(item=>{

returnitem.name

        })

console.log('form',this.BIform)

console.log("dsa",this.list)

letarr = []

for (vari = 0 ; i <= this.list.length ; i++){

console.log("dsadas",this.list[i].data)

letarr = this.list[i].data.split("、")

console.log('s',this.list[i])

this.list[i].data = arr

console.log('bb',arr)

console.log('list',this.list)

this.BIlist = this.list

console.log('BIlist',this.BIlist)

        }

    },

// 步进器事件

handleChange(currentValue,oldValue){

if(currentValue>oldValue){

this.list.push({name:'',type:'bar',

data:"",//[150、232、201、154、190、330、410]220、182、191、234、290、330、310,// 1、2、3、4、5、6、7

markPoint : {

data : [

                                {type :'max', name:'最大值'},

                                {type :'min', name:'最小值'}

                            ]

                        },

markLine : {

data : [

                                {type :'average', name:'平均值'}

                            ]

                        }

                    },)

        }else {

this.list.splice(-1,1)

this.draw()

        }

console.log('list',this.list)

this.legendName = this.list.map(item=>{

returnitem.name

        })

console.log("aa",this.legendName)

this.draw()

    },

// 获取formid

newId(){

consts = [];

consthexDigits = '0123456789ABCDEF';

for (leti = 0; i < 10; i++) {

s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);

      }

// s[14] = '4';

// s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);

s[8] = s[13] = s[18] = s[23];

constuuid = "formID_" + s.join('');

this.BIform.id = uuid

console.log('this.BIform',this.BIform)

    },

// 柱状图表

draw(){

// 初始化echarts实例

letmyChart = this.$echarts.init(document.getElementById('myChart'))

// 绘制图表

varoption = {  

//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题  

title: {  

//主标题文本，'\n'指定换行  

text:this.BIform.name,  

//主标题文本超链接  

link:'/',  

//副标题文本，'\n'指定换行  

subtext:'',  

//副标题文本超链接  

sublink:'/',  

//水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）  

x:'left',  

//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）  

y:'top'

                },  

//提示框，鼠标悬浮交互时的信息提示  

tooltip: {  

//触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'  

trigger:'axis'

                },  

//图例，每个图表最多仅有一个图例  

legend: {  

//显示策略，可选为：true（显示） | false（隐藏），默认值为true  

show:true,  

//水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）  

x:'center',  

//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）  

y:'top',  

//legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应  

data:this.legendName

                },  

//工具箱，每个图表最多仅有一个工具箱  

toolbox: {  

//显示策略，可选为：true（显示） | false（隐藏），默认值为false  

show:true,  

//启用功能，目前支持feature，工具箱自定义功能回调处理  

feature: {  

//辅助线标志  

mark: {show:true},  

//dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退  

dataZoom: {  

show:true,  

title: {  

dataZoom:'区域缩放',  

dataZoomReset:'区域缩放后退'

                            }  

                        },  

//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能  

dataView: {show:true, readOnly:true},  

//magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换  

magicType: {show:true, type: ['line','bar','stack','tiled']},  

//restore，还原，复位原始图表  

restore: {show:true},  

//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'  

saveAsImage: {show:true}  

                    }  

                },  

//是否启用拖拽重计算特性，默认关闭(即值为false)  

calculable:true,  

//直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值  

//横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型  

xAxis: [  

                    {  

//显示策略，可选为：true（显示） | false（隐藏），默认值为true  

show:true,  

//坐标轴类型，横轴默认为类目型'category'  

type:'category',  

//类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行  

data:this.aa

                    }

                ],

//直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值  

//纵轴通常为数值型，但条形图时则纵轴为类目型  

yAxis: [  

                    {  

//显示策略，可选为：true（显示） | false（隐藏），默认值为true  

show:true,  

//坐标轴类型，纵轴默认为数值型'value'  

type:'value',  

//分隔区域，默认不显示  

splitArea: {show:true}  

                    }  

                ],  

// 调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色

color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

// color:this.color,

//sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象  

series:this.BIlist

// [  

//     // this.seriesForm 

//     {

//         name:'蒸发量',

//         type:'bar',

//         data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],

//         markPoint : {

//             data : [

//                 {type : 'max', name: '最大值'},

//                 {type : 'min', name: '最小值'}

//             ]

//         },

//         markLine : {

//             data : [

//                 {type : 'average', name: '平均值'}

//             ]

//         }

//     },

//     {

//         name:'降水量',

//         type:'bar',

//         data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],

//         markPoint : {

//             data : [

//                 {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},

//                 {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}

//             ]

//         },

//         markLine : {

//             data : [

//                 {type : 'average', name : '平均值'}

//             ]

//         }

//     }

// ]  

            };  

//为echarts对象加载数据              

myChart.setOption(option,true);  

        },

  }

}

</script>

<stylescoped>

</style>