清单"/>
vue 记账清单
通过发送请求来从后台获取更改数据，需要用到钩子函数。
使用ECharts来渲染饼图。
在渲染函数中setOption动态更新饼图（map）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- CSS only --><linkrel="stylesheet"href="@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 v-model.trim="name" type="text" class="form-control" placeholder="消费名称" /><input v-model.number="price" type="text" class="form-control" placeholder="消费价格" /><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 list" :key="item.id"><td>{{index+1}}</td><td>{{item.name}}</td><td :class="{red: item.price >= 500}">{{item.price.toFixed(2)}}</td><td><a @click="del(item.id)" href="javascript:;">删除</a></td></tr></tbody><tfoot><tr><td colspan="4">消费总计： {{totalPrice.toFixed(2)}}</td></tr></tfoot></table></div><!-- 右侧图表 --><div class="echarts-box" id="main"></div></div></div><script src="@5.4.0/dist/echarts.min.js"></script><script src="@2/dist/vue.js"></script><script src=".min.js"></script><script>/*** 接口文档地址：* * * 功能需求：* 1. 基本渲染* 2. 添加功能* 3. 删除功能* 4. 饼图渲染*/const app = new Vue({el: '#app',data: {list:[],name:'',price:''},created() {this.getlist()},mounted() {this.mychart = echarts.init(document.querySelector('#main'))this.mychart.setOption({title: {text: '消费账单列表',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: '消费账单',type: 'pie',radius: '50%',data: [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]})},computed:{totalPrice(){return this.list.reduce((sum,item) => sum+item.price , 0 )}},methods: {async getlist(){const res = await axios.get("",{params:{creator:'guiji'}})this.list = res.data.datathis.mychart.setOption({series: [{data: this.list.map(item => ({value:item.price , name:item.name}))}]})},async add(){if(!this.name){alert('请输入消费名称')return}if(typeof this.price !== "number"){alert('请输入正确的消费价格')return}await axios.post("",{creator:'guiji',name:this.name,price:this.price})this.getlist()this.name=''this.price=''},async del(id){axios.delete(`/${id}`)this.getlist()}},})</script></body>
</html>
更多推荐
vue 记账清单
发布评论