Vue实现消费清单明细饼图展示-CSDN博客

  • 阿里云国际版折扣https://www.yundadi.com

  • 阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

    功能

    1. 可以进行消费项增删
    2. 消费额大于500会标红
    3. 消费金额合计
    4. 饼图展示消费项
      在这里插入图片描述

    代码

    <!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 -->
      <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>
        /**
         * 接口文档地址
         * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
         * 
         * 功能需求
         * 1. 基本渲染
         * 2. 添加功能
         * 3. 删除功能
         * 4. 饼图渲染
         */
        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>
    
  • 阿里云国际版折扣https://www.yundadi.com

  • 阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
    标签: vue