废话不多说 直接上代码截图

1 在TS先定义数据

 

 

 

2，渲染数据

 

 

 

 

 

 3，添加删除

 

 

 4 运行截图

 

 

 

 

 

 

 

 

enum Sex{     Boy='男',     Gril='女',     Unknown='未知' } class Student{      name:string;      sex:Sex;      age:number;      eScore:number;      cScore:number;      constructor(name:string,sex:Sex,age:number,eScore:number,cScore:number){            this.name=name            this.sex=sex            this.age=age            this.eScore=eScore            this.cScore=cScore       }
} let  studentList:Array<Student>=[     {name:'tom',sex:Sex.Boy,age:20,eScore:90,cScore:66},     {name:'lily',sex:Sex.Gril,age:30,eScore:85,cScore:88},     {name:'jim',sex:Sex.Unknown,age:45,eScore:50,cScore:96}, ] applyFun(studentList)
    function applyFun(studentList:any){         let str=studentList.map((v:any,i:any)=>{             return ` <tr>                     <td>${v.name}</td>                     <td>${v.sex}</td>                     <td>${v.age}</td>                     <td>${v.eScore}</td>                     <td>${v.cScore}</td>                     <td>                     <button class='del' data-id='${i}'>删除</button>                     </td>                 </tr>`         }).join('')         let tbody:any = document.querySelector('.box1 table tbody')         tbody.innerHTML=str     }
         declare let echarts:any     var chartDom = document.querySelector('.box2');     var myChart = echarts.init(chartDom);     conmmon()     function conmmon(){         let arr1:Array<any>=[]         let arr2:Array<any>=[]         let arr3:Array<any>=[]                  studentList.forEach((v:any) => {             arr1.push(v.name)             arr2.push(v.eScore)             arr3.push(v.cScore)         });         var option:any;          option = {         title: {             text: '游戏学院',             subtext: '设计1802考试成绩',             left:'10',             subtextStyle:{             color: '#f2b63' ,                  }         },                  tooltip: {             trigger: 'axis'         },         legend: {             data: ['技能', '理论']         },         toolbox: {             show: true,             feature: {                 dataView: {show: true, readOnly: false},                 magicType: {show: true, type: ['line', 'bar']},                 restore: {show: true},                 saveAsImage: {show: true}             }         },         xAxis: {             type: 'category',             data:arr1         },         yAxis: {             type: 'value'         },         series: [{             name:'技能',             data: arr2,             type: 'bar'         },         {             name:'理论',             data: arr3,             type: 'bar'         }     ]     };          myChart.setOption(option)     }          // 添加     let add = document.querySelector('.add') as any     let zhe =document.querySelector('.zhe') as any     let que = document.querySelector('.que') as any     let username = document.querySelector('.name') as any     let age = document.querySelector('.age') as any     let sex = document.querySelectorAll('.sex') as any     let ll = document.querySelector('.ll') as any     let jn = document.querySelector('.jn') as any     let obj:any={}     console.log(add)     add.onclick=function(){         zhe.style.display='block'              }         que.onclick=function(){         let names:any=[]         let sexx:any         sex.forEach((v:any) => {              if(v.checked){               sexx=v.value              }                        });         obj={             name:username.value,             age:age.value,             sex:sexx,             eScore:jn.value,             cScore:ll.value         }         zhe.style.display='none'         console.log(obj)         studentList.push({...obj})                        applyFun(studentList)         conmmon()     }
     // 删除          let del:any = document.querySelectorAll('.del')  let tbody:any=document.querySelector('tbody')  console.log(tbody)           tbody.addEventListener('click',function(e:any) {         if(e.target.className=='del'){             studentList.splice(e.target.getAttribute('data-id'),1)             applyFun(studentList)             conmmon()         }      },false)