Vue实现消费清单明细饼图展示

news2024/11/25 6:28:29

功能

  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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1164384.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

代码随想录算法训练营第四十一天 | LeetCode 416. 分割等和子集

代码随想录算法训练营第四十一天 | LeetCode 416. 分割等和子集 文章链接&#xff1a;01背包理论基础 01背包理论基础&#xff08;滚动数组&#xff09; 分割等和子集 视频链接&#xff1a;01背包理论基础 01背包理论基础&#xff08;滚动数组&#xff09; 分割等和子集 1. 01 …

腾讯云双11活动时间、活动入口、优惠政策详细解读

2023年腾讯云双11大促活动已开启&#xff0c;作为年终最大的一次优惠促销活动&#xff0c;腾讯云的优惠力度还是不错的&#xff0c;爆款云服务器首年88元&#xff0c;还有9999元大额代金券免费领取&#xff01; 一、腾讯云双11活动时间 即日起至2023-11-30 23:59:59&#xff0…

Envoy动态配置

Envoy动态配置 本节我们将学习 Envoy 的核心 - 动态配置的使用。 目录 本节实战 实战名称&#x1f6a9; 实战&#xff1a;Envoy动态配置-EDS-2023.10.31(测试成功)&#x1f6a9; 实战&#xff1a;基于 API 的动态配置-2023.11.2(测试成功) 1、基于文件的动态配置 Envoy 除了…

Python实现自动化网页操作

1 准备 推荐使用Chrome浏览器 1.1 安装selenium程序包 激活虚拟环境&#xff0c;打开新的Terminal&#xff0c;输入以下代码&#xff1a; python -m pip install selenium 如下图所示&#xff0c;表示安装成功&#xff0c;版本为4.7.2 安装成功 关闭虚拟环境&#xff0c;打…

nginx项目部署教程

nginx项目部署教程 1. 项目部署介绍 当我们的项目开发完毕后&#xff0c;我们需要将项目打包、部署到服务器上&#xff0c;供用户来使用。 目前&#xff0c;常见的部署方式有两种&#xff1a; 后端部署 前后端分离部署 1-1 后端部署 这是最古老的部署方式&#xff0c;也是…

提升ChatGPT答案质量和准确性的方法Prompt engineering

文章目录 怎么获得优质的答案设计一个优质prompt的步骤:Prompt公式:示例怎么获得优质的答案 影响模型回答精确度的因素 我们应该知道一个好的提示词,要具备一下要点: 清晰简洁,不要有歧义; 有明确的任务/问题,任务如果太复杂,需要拆分成子任务分步完成; 确保prompt中…

TSINGSEE青犀智能视频管理监督系统在车站场景中的应用方案

旭帆科技的智能视频监控系统可应对绝大多数场景&#xff0c;近期就有一个粉丝私信&#xff0c;随着年关将近&#xff0c;越来越多的人需要返乡和外出旅游&#xff0c;高铁站、火车站这些地方人员密集度高&#xff0c;发生事故的风险也大&#xff0c;问我们有没有关于车站的智能…

Python最强自动化神器Playwright!再也不用为爬虫逆向担忧了!

版权说明:本文禁止抄袭、转载,侵权必究! 目录 一、简介+使用场景二、环境部署(准备)三、代码生成器(优势)四、元素定位器(核心)五、追踪查看器(辅助)六、权限控制与认证(高级)七、其他重要功能(进阶)八、作者Info一、简介+使用场景 Playwright是什么?来自Chat…

不是我吹牛逼,这绝对是去掉 if...else 最佳的文章

我相信小伙伴一定看过多篇怎么去掉 if…else 的文章&#xff0c;也知道大家都很有心得&#xff0c;知道多种方法来去掉 if…else &#xff0c;比如 Option&#xff0c;策略模式等等&#xff0c;但我相信大明哥这篇文章绝对是最全&#xff0c;最完备怎么去掉 if…else 的文章&am…

Git保姆级教学(超详细版)

一、Git概述 Git 是一个免费的、开源的 分布式版本控制系统 &#xff0c;可以快速高效地处理从小型到大型的各种 项目。 Git 易于学习&#xff0c;占地面积小&#xff0c;性能极快。 它具有廉价的本地库&#xff0c;方便的暂存区域和多个工作 流分支等特性。其性能优于 Sub…

开发模型(瀑布、螺旋、scrum) 和 测试模型(V、W)、增量和迭代、敏捷(思想)及敏捷开发 scrum

&#x1f9f8;欢迎来到dream_ready的博客&#xff0c;&#x1f4dc;相信您对这篇博客也感兴趣o (ˉ▽ˉ&#xff1b;) 震惊&#xff01;测试人员对BUG的全方位解析&#xff0c;测试的执行和BUG管理&#xff01; 原来测试人员遇到BUG是这样返回给开发的&#xff01;什么是BUG&am…

ElasticSearch 批量插入漏数据

项目场景&#xff1a; 项目中需要把Mysql数据同步到ElasticSearch中 问题描述 数据传输过程中数据不时出现丢失的情况&#xff0c;偶尔会丢失一部分数据&#xff0c;本地测试也无法复现&#xff0c;后台程序也没有报错&#xff0c;一到正式环境就有问题,很崩溃 这里是批量操…

泰坦陨落2报错找不到msvcr120/msvcp120丢失实用解决方法

在计算机使用过程中&#xff0c;我们可能会遇到各种问题&#xff0c;其中之一就是msvcr120.dll缺失。msvcr120.dll是Microsoft Visual C Redistributable的一个组件&#xff0c;它包含了运行许多基于Windows的应用程序所必需的库文件。当这个文件丢失或损坏时&#xff0c;可能会…

【JAVA学习笔记】59 - JUnit框架使用、本章作业

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter15/src/com/yinhai/homework JUnit测试框架 1.基本介绍 1. JUnit是一个Java语言的单元测试框架 2.多数Java的开发环境都已经集成了JUnit作为单元测试的工具 2.如何使用 创建方法后&#x…

LeetCode 70.爬楼梯 + 记忆化搜索 + 递推 + 动态规划 + 空间优化

关于此题的我的往期文章&#xff1a; leetCode 70.爬楼梯 动态规划_呵呵哒(&#xffe3;▽&#xffe3;)"的博客-CSDN博客https://blog.csdn.net/weixin_41987016/article/details/133325224?spm1001.2014.3001.5501 上i-1层楼梯&#xff0c;有 dfs(i-1) 种方法&#x…

Sqlyog 无法连接 8 版本的mysql caching_sha2_password could not be loaded

Sqlyog 无法连接 8 版本的mysql caching_sha2_password could not be loaded 1.问题背景 近期系统对Mysql 版本进行了升级&#xff0c;由原来的 5.7升至 8版本&#xff0c;在现场使用Sqlyog 作为数据库连接软件时&#xff0c;发现连接失败。 2.问题现象 使用Sqlyog配置完连…

Oracle 19c 可插拔数据库PDB的创建方式

多租户容器数据库架构图总览 多租户容器数据库组成部分&#xff1a; 1.有且仅有一个CDB Root(CDB$ROOT)&#xff0c;它包含了Root和所有PDB数据库的元数据和数据字典信息。 2.有且仅有一个Seed PDB(PDB$SEED),它的作用是创建其他PDB的模板&#xff0c;它是只读库&#xff0c;…

C语言实现俄罗斯方块游戏

文章目录 1 前言2 游戏截图3 源代码 1 前言 本文介绍的是我空闲时间用C语言写的一个俄罗斯方块游戏&#xff0c;整个程序只有一个文件&#xff0c;实现了基本的游戏功能&#xff0c;但还是有些缺陷&#xff0c;希望有心之士能够继续完善&#xff0c;感谢各位&#xff01; 2 游戏…

redis rdb aof

appendonly yes # appendfsync always appendfsync everysec # appendfsync no E:\Document_Redis_Windows\redis-2.4.5-win32-win64\64bit appendonly.aof

如何实现异步通知的重试机制

工作中经常要和第三方做对接&#xff0c;比如支付、电子合同等系统。操作成功之后&#xff0c;第三方会发送异步的通知&#xff0c;返回最终的处理结果&#xff0c;使用异步而不是使用同步通知&#xff0c;是为了加快系统响应速度&#xff0c;防止线程阻塞。任务处理完成后通过…