标签：document name age TS ECharts let 增删 sex any

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

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)              

标签：document,name,age,TS,ECharts,let,增删,sex,any
来源： https://www.cnblogs.com/guyang123/p/15036440.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。