vue 记账清单-饼图渲染_vue记账清单饼状图-CSDN博客

本文链接：https://blog.csdn.net/modern358/article/details/132059187
新建vue项目
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记账清单</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .container{
            width: 100%;
            height: 100vh;
        }
        .title{
            width: 100%;
            height: 60px;
            line-height: 60px;
        }
        .left{
            width: 50%;
            height: 90%;
            float: left;
        }
        .right{
            width: 49%;
            height: 90%;
            float: right;

        }
        .red{
            color: red;
        }

        .form {
            padding-bottom: 10px;
        }
        .form input[type=text]{
            width: 260px;
            height: 30px;
            line-height: 28px;
        }
        .form button{
            width: 180px;
            height: 35px;
            line-height: 34px;
            background-color: lightblue;
        }

        .echarts-box{
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="title">
                <h2>记账清单</h2>
            </div>
            <div class="left">
                <div class="form">
                    消费名称：
                    <input type="text" placeholder="请输入消费名称" v-model.trim="name" @keyup.enter="btnAdd">
                    消费价格：
                    <input type="text" placeholder="请输入消费价格" v-model.number="price" @keyup.enter="btnAdd">
                    <button @click="btnAdd">添加账单</button>
                </div>
                <div class="table">
                    <table border="1" width="100%" style="text-align: center">
                        <thead>
                            <tr style="background-color: lightgrey">
                                <th>编号</th>
                                <th>消费名称</th>
                                <th>消费价格</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody v-if="list.length > 0">
                            <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 href="#" @click="del(item.id)">删除</a></td>
                            </tr>
                        </tbody>
                        <tbody v-else>
                            <tr>
                                <td colspan="4">暂无数据</td>
                            </tr>
                        </tbody>
                        <tfoot v-if="list.length > 0">
                            <tr style="text-align: left">
                                <td colspan="4"><strong>消费总计：￥<span>{{ totalPrice.toFixed(2) }}</span></strong></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="right">
                <div class="echarts-box" id="main"></div>
            </div>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
    <script>
        /*
        功能需求：
        1 基本渲染
            立刻发送请求获取数据 created
            拿到数据，存到data的响应数据中
            结合数据，进行渲染 v-for
            消费统计 使用计算属性
        2 添加功能
            收集表单数据 v-model
            给添加按钮注册点击事件，发送添加请求
            需要重新渲染数据 getList
        3 删除功能
            注册点击事件，传参数id
            根据id发送删除请求
            需要重新渲染 getList
        4 饼图渲染


         */
        // const defaultArr = [
        //     {id:1,name:'球鞋',price:99,creator:'小白'},
        //     {id:2,name:'裤子',price:88,creator:'小白'},
        //     {id:3,name:'上衣',price:599,creator:'小白'},
        //     {id:1,name:'袜子',price:19,creator:'小白'}
        // ];

        const app = new Vue({
            el: '#app',
            data: {
                list:[],
                name:'',
                price:''
            },
            methods:{
                //获取数据列表
                async getList(){
                    const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{
                        params:{
                            creator: '虾米大王'
                        }
                    });
                    console.log(res);
                    this.list = res.data.data;

                    //更新图表
                    this.myChart.setOption({
                        series: [
                            {
                                data: this.list.map( item =>({
                                    value: item.price,
                                    name: item.name
                                }))
                            }
                        ]
                    });

                },
                //添加账单
                async btnAdd(){
                    if(!this.name){
                        alert("请输入消费名称");
                        return
                    }
                    if(typeof this.price !== 'number'){
                        alert("请输入消费价格");
                        return
                    }
                    const res = await axios.post('https://applet-base-api-t.itheima.net/bill',{
                        creator:'虾米大王',
                        name: this.name,
                        price: this.price
                    });
                    console.log(res);
                    this.name = '';
                    this.price = '';
                    this.getList();
                },
                //删除
                async del(id){
                    //console.log(id);
                    const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`);
                    this.getList();
                }
            },
            computed:{
              totalPrice() {
                  return this.list.reduce( (sum,item) => sum + item.price,0);
              }
            },
            created(){
                this.getList();
            },
            mounted(){
                this.myChart = echarts.init(document.querySelector('#main'));
                this.myChart.setOption({
                    //大标题
                    title: {
                        text: '消费账单列表',
                        subtext: '',
                        left: 'center'
                    },
                    //提示框
                    tooltip: {
                        trigger: 'item'
                    },
                    //图例
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    //数据项
                    series: [
                        {
                            name: '消费账单',
                            type: 'pie',
                            radius: '60%', //圆的半径
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            }
        })
    </script>
</body>
</html>