vue制作记账清单

效果图：

 接口说明及功能需求：

接口文档地址：（来源黑马）

 https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058

功能需求：

1. 基本渲染

 2. 添加功能

 3. 删除功能

4. 饼图渲染

  <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>

一、基本渲染

a-立即发出请求获取数据 created

b-拿到数据，存到data

c-结合数据渲染

d-消费统计 计算属性

data: {
  // 存放数据
  list: []
},
async created() {
  const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
    params: {
      creator: '唐'
    }
  })
  console.log(res.data.data);
  this.list = res.data.data
},
computed: {
  totalPrice() {
    return this.list.reduce((sum, item) => sum + item.price, 0);
  }
}

<tbody>
  <tr v-for="(item,index) in list" :key="item.id">
    <td>{{index+1}}</td>
    <td>{{item.name}}</td>
    <td>{{item.price.toFixed(2)}}</td>
    <td><a href="javascript:;">删除</a></td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td colspan="4">消费总计： {{totalPrice.toFixed(2)}}</td>
  </tr>
</tfoot>

二、添加功能

a-收集表单数据

b-按钮注册点击事件

c-需要重新渲染

        <!-- 添加资产 -->
<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 @click="add" type="button" class="btn btn-primary">添加账单</button>
</form>

async created() {
  this.getList();
},
methods: {
//将上面的created内容封装成getList(),每次使用时调用用于更新页面渲染
  async getList() {
          const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
            params: {
              creator: '唐'
            }
          })
          // console.log(res.data.data);
          this.list = res.data.data
        },
  async add() {
          // 判断
          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();
        }
}

三、删除功能

a-注册点击事件，传id

b-根据id发送删除请求

c-重新渲染

<td><a @click.prevent="del(item.id)" href="javascript:;">删除</a></td>

methods中写入方法： 

async del(id) {
  // 根据id发送删除请求
  const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
  console.log(res);
  // 重新渲染
  this.getList();
},

四、饼图渲染

a-初始化一个饼图  echarts  mounted之后

 b-根据数据实时更新饼图

使用echarts：Apache ECharts

 <!-- 右侧图表 -->
<div class="echarts-box" id="main"></div>

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: [
                // { value: 1048, name: 'Search Engine' },
                // { value: 735, name: 'Direct' },
                // { value: 580, name: 'Email' },
                // { value: 484, name: 'Union Ads' },
                // { value: 300, name: 'Video Ads' }

              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }
   

 图表的数组不断更新：在getList（）添加代码：对图表数据进行更新

async getList() {
  const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
    params: {
      creator: '唐'
    }
  })
  // console.log(res.data.data);
  this.list = res.data.data
  // 更新图表
  this.myChart.setOption({
    series: [
      {
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        // ],
        data: this.list.map(item => ({ value: item.price, name: item.name }))
      }
    ]
  })
},

实现效果：