功能
可以进行消费项增删 消费额大于500会标红 消费金额合计 饼图展示消费项
代码
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" />
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" />
< title> Document</ title>
< link rel = " stylesheet" href = " https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
< style>
.red {
color : red !important ;
}
.search {
width : 300px;
margin : 20px 0;
}
.my-form {
display : flex;
margin : 20px 0;
}
.my-form input {
flex : 1;
margin-right : 20px;
}
.table> :not(:first-child) {
border-top : none;
}
.contain {
display : flex;
padding : 10px;
}
.list-box {
flex : 1;
padding : 0 30px;
}
.list-box a {
text-decoration : none;
}
.echarts-box {
width : 600px;
height : 400px;
padding : 30px;
margin : 0 auto;
border : 1px solid #ccc;
}
tfoot {
font-weight : bold;
}
@media screen and ( max-width : 1000px) {
.contain {
flex-wrap : wrap;
}
.list-box {
width : 100%;
}
.echarts-box {
margin-top : 30px;
}
}
</ style>
</ head>
< body>
< div id = " app" >
< div class = " contain" >
< div class = " list-box" >
< form class = " my-form" >
< input type = " text" class = " form-control" placeholder = " 消费名称" v-model = " name" />
< input type = " text" class = " form-control" placeholder = " 消费价格" v-model = " price" />
< button type = " button" class = " btn btn-primary" @click = " add" > 添加账单</ button>
</ form>
< table class = " table table-hover" >
< thead>
< tr>
< th> 编号</ th>
< th> 消费名称</ th>
< th> 消费价格</ th>
< th> 操作</ th>
</ tr>
</ thead>
< tbody>
< tr v-for = " (item,index) in bills" :key = " item.id" >
< td> {{index+1}}</ td>
< td> {{item.name}}</ td>
< td :class = " { red:item.price>500}" > {{item.price}}</ td>
< td> < a href = " javascript:;" @click = " del(item.id)" > 删除</ a> </ td>
</ tr>
</ tbody>
< tfoot>
< tr>
< td colspan = " 4" > 消费总计: {{totalPrice}}</ td>
</ tr>
</ tfoot>
</ table>
</ div>
< div class = " echarts-box" id = " main" > </ div>
</ div>
</ div>
< script src = " https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js" > </ script>
< script src = " https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" > </ script>
< script src = " https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" > </ script>
< script>
const app = new Vue ( {
el : '#app' ,
data : {
bills : [ ] ,
name : '' ,
price : '' ,
} ,
created ( ) {
this . getBill ( )
} ,
mounted ( ) {
this . myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
this . myChart. setOption ( {
title : {
text : '消费明细' ,
left : 'center'
} ,
tooltip : {
trigger : 'item'
} ,
legend : {
orient : 'vertical' ,
left : 'left'
} ,
data : [ ] ,
series : [
{
name : '消费账单' ,
type : 'pie' ,
radius : '50%' ,
emphasis : {
itemStyle : {
shadowBlur : 10 ,
shadowOffsetX : 0 ,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
}
}
]
} )
} ,
computed : {
totalPrice ( ) {
return this . bills. reduce ( ( sum, item ) => sum + item. price, 0 )
}
} ,
methods : {
async getBill ( ) {
const res = await axios. get ( "https://applet-base-api-t.itheima.net/bill" , {
params : {
creator : '小黑'
}
} )
this . bills = res. data. data
this . myChart. setOption ( {
series : [
{
data : this . bills. map ( item => ( { value : item. price, name : item. name } ) )
}
]
} )
} ,
async add ( ) {
const res = await axios. post ( 'https://applet-base-api-t.itheima.net/bill' , {
creator : '小黑' ,
name : this . name,
price : this . price
} )
this . name = '' ,
this . price = ''
this . getBill ( )
} ,
async del ( id ) {
const res = await axios. delete ( ` https://applet-base-api-t.itheima.net/bill/ ${ id} ` )
this . getBill ( )
}
}
} )
</ script>
</ body>
</ html>