在vue2中使用饼状图
1.引入vue2和echarts
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>2.1 补充基本的body内容
<div id="app"><input type="text" style="width: 100px;" placeholder="消费名称" v-model.trim="name"><input type="text"style="width: 100px;" placeholder="消费价格" v-model.number="price"><button @click="add(name,price)" >添加账单</button><br><table border="1px solid red" style="text-align: center;width: 300px;"><thead><tr><td>编号</td><td>消费名称</td><td>消费价格</td><td>操作</td></tr></thead><tbody><tr v-for="(item,index) in list" v-on:key="item.id"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td> <p @click="del(item.id)">删除</p></td></tr></tbody></table><!-- 给饼图的空间 --><div style="width: 500px;height: 300px;border:2px solid red;" class="main"></div></div>2.2补充基本的script内容
<script>const l =[{id:1,name:'小黑',price:10},]const app =new Vue({el:"#app",data:{name:'',price:'',list: l,},methods:{},watch:{},mounted(){}})</script>到现在展示的效果如下
3.在methods中添加新增和删除的功能
add(a,b){this.list.unshift({id:+new Date(),name:a,price:b})},del(a){ this.list= this.list.filter(b=>b.id!==a) },这样我们的添加和删除的功能就可以实现了
4.将修改后的内存持久化存储
因为我们要对多个目标进行监听，所以需要使用watch的完整写法
watch:{list:{ deep:true,//深度监视 handler(newValue){ localStorage.setItem("list",JSON.stringify(newValue)) } } } ,存储后前面的获取也需要修改，从本地获取并转成json格式
JSON.parse(localStorage.getItem("list"))这样我们修改的后的数据就不会因为刷新浏览器而不存在了
5.使用饼状图
在钩子函数mounted渲染完成后添加echarts
this.myChat= echarts.init(document.querySelector('.main'))this.myChat.setOption({ title: { text: '小黑记事本', subtext: 'Fake Data', // 小标题 left: 'center' ,}, tooltip: { trigger: 'item' //提示框}, legend: { //图例orient: 'vertical', //垂直left: 'left' }, series: [ { name: '消费账单', type: 'pie', radius: '60%', data: this.list.map(item=>({value:item.price,name:item.name})), emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] })
这样我们就可以清晰的看到各项数据的占比，但是这是我们在渲染完成后才会刷新，所以需要我们重新定义一个方法在每次添加和删除之后进行调用来实时更新饼状图
5.1更新饼状图的方法
a(){ this.myChat.setOption({series: [ { data: this.list.map(item=>({value:item.price,name:item.name})), } ]})}
完整代码如下
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 引入vue2 --> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><!-- 引入axios --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script><!-- 引入echarts --> </head><body><div id="app"><input type="text" style="width: 100px;" placeholder="消费名称" v-model.trim="name"><input type="text"style="width: 100px;" placeholder="消费价格" v-model.number="price"><button @click="add(name,price)" >添加账单</button><br><table border="1px solid red" style="text-align: center;width: 300px;"><thead><tr><td>编号</td><td>消费名称</td><td>消费价格</td><td>操作</td></tr></thead><tbody><tr v-for="(item,index) in list" v-on:key="item.id"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td> <p @click="del(item.id)">删除</p></td></tr></tbody></table><!-- 给饼图的空间 --><div style="width: 500px;height: 300px;border:2px solid red;" class="main"></div></div><script>const msg = [{id:1,name:"手表",price:299.00},{id:2,name:"大衣",price:599.00},{id:3,name:"球鞋",price:299.00},{id:4,name:"鸭舌帽",price:99.00}]var list1 = JSON.parse(localStorage.getItem("list"))const app =new Vue({el:"#app",data:{name:"",price:"",list:list1||msg},methods:{add(a,b){console.log(a)if(a==null || a==""){alter("请您添加消费名称")} this.list.unshift({id:+new Date(),name:a,price:b})this.a()},del(a){ this.list= this.list.filter(b=>b.id!==a) this.a()}, a(){ this.myChat.setOption({series: [ { data: this.list.map(item=>({value:item.price,name:item.name})), } ]})}},watch:{list:{ deep:true,//深度监视 handler(newValue){ localStorage.setItem("list",JSON.stringify(newValue)) } } } , mounted(){//渲染后this.myChat= echarts.init(document.querySelector('.main'))this.myChat.setOption({ title: { text: '小黑记事本', subtext: 'Fake Data', // 小标题 left: 'center' ,}, tooltip: { trigger: 'item' //提示框}, legend: { //图例orient: 'vertical', //垂直left: 'left' }, series: [ { name: '消费账单', type: 'pie', radius: '60%', data: this.list.map(item=>({value:item.price,name:item.name})), emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] })}, })</script></body> </html>
相关文章：
在vue2中使用饼状图
1.引入vue2和echarts <script src"https://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js"></script> <script src"https://cdn.jsdelivr.net/npm/echarts5.4.0/dist/echarts.min.js"></script> 2.1 补充基本的body内容 <div id…...
面经（五）南京 软通动力 一面
注：已经有了接近一年的工作经验 总体评价 不完全是技术面，面试经过还行，但可能是期望岗位和对方需求不太一致，感觉不太好过 面试经过 HR找你，发简历入库，然后商量面试时间，发腾讯会议链接腾…...
线段树模型及例题整理
线段树的应用范围非常广，可以处理很多与区间有关的题目。 将区间抽象成一个节点，在这个节点中储存这个区间的一些值，那么如果看成节点的话，这就很像一棵满二叉树，所以我们可以用一维数组来储存节点。那么就要考虑父子节…...
揭秘Java性能调优的层次 | 综合多方向提升应用程序性能与系统高可用的关键（架构层次规划）
揭秘性能调优的层次 | 综合多方向提升应用程序性能与系统的高可用 前言介绍调优层次调优 — 设计案例说明 - 操作轮询控制事件驱动 调优 — 代码案例说明 - ArrayList和LinkedList性能对比案例说明 - 文件读写实现方式的性能对比 调优 — JVMJVM架构分布JVM调优方向**JVM垃圾回…...
事件循环解析
浏览器的进程模型 何为进程？ 程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程 每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。 何为线程？ 有了进程后&…...
物联网技术助力智慧城市安全建设：构建全方位、智能化的安全防护体系
一、引言 随着城市化进程的加速和信息技术的迅猛发展，智慧城市已成为现代城市发展的重要方向。在智慧城市建设中，安全是不可或缺的一环。物联网技术的快速发展为智慧城市安全建设提供了有力支持，通过构建全方位、智能化的安全防护体系&#…...
mac打不开xxx软件， 因为apple 无法检查其是否包含恶意
1. 安全性与隐私下面的允许来源列表，有些版本中的‘任何来源’选项被隐藏了，有些从浏览器下载的软件需要勾选这个选项才能安装 打开‘任何来源’选项 sudo spctl --master-disable 关闭‘任何来源’选项 sudo spctl --master-enable...
《深入浅出红黑树：一起动手实现自平衡的二叉搜索树》
一、分析 1. 红黑树的性质 红黑树是一种自平衡的二叉搜索树，它具有以下五个性质： （1）节点是红色或黑色。 （2）根节点是黑色。 （3）所有叶子节点（NIL节点）是…...
C++——模版
前言：哈喽小伙伴们好久不见，这是2024年的第一篇博文，我们将继续C的学习，今天这篇文章，我们来习一下——模版。 目录 一.什么是模版 二.模版分类 1.函数模版 2.类模板 总结 一.什么是模版 说起模版，我们…...
《TCP/IP详解 卷一》第9章 广播和组播
目录 9.1 引言 9.2 广播 9.2.1 使用广播地址 9.2.2 发送广播数据报 9.3 组播 9.3.1 将组播IP地址转换为组播MAC地址 9.3.2 例子 9.3.3 发送组播数据报 9.3.4 接收组播数据报 9.3.5 主机地址过滤 9.4 IGMP协议和MLD协议 9.4.1 组成员的IGMP和MLD处理 9.4.2 组播路由…...
备战蓝桥杯---动态规划的一些思想1
话不多说，直接看题： 目录 1.双线程DP 2.正难则反多组DP 3.换个方向思考： 1.双线程DP 可能有人会说直接贪心：先选第1条的最优路径，再选第2条最优路径。 其实我们再选第1条时，我们怎么选会对第2条的路径…...
基于BERTopic模型的中文文本主题聚类及可视化
文章目录 BERTopic简介模型加载地址文本加载数据处理BERTopic模型构建模型结果展示主题可视化总结BERTopic简介 BERTopic论文地址：BERTopic: Neural topic modeling with a class-based TF-IDF procedure BERTopic是一种结合了预训练模型BERT和主题建模的强大工具。它允许我…...
MySQL：函数
提醒： 设定下面的语句是在数据库名为 db_book里执行的。 创建user_info表 注意：pwd为密码字段，这里使用了VARCHAR(128)类型，为了后面方便对比，开发项目里一般使用char(32)，SQL语句里使用MD5加密函数 USE db…...
C/C++内存管理及内存泄漏详解
目录 C/C内存分布 C语言中动态内存管理方式：malloc/calloc/realloc/free C内存管理方式 new/delete操作内置类型 new和delete操作自定义类型 operator new与operator delete函数 new和delete的实现原理 内置类型 自定义类型 内存泄漏 概念 内存泄漏分类 ⭐…...
什么是系统工程（字幕）41
0 00:00:01,650 --> 00:00:01,884 好 1 00:00:01,884 --> 00:00:06,330 那这个时候我们就可以把它绑定到上面了 2 00:00:06,610 --> 00:00:07,940 那我们来看 3 00:00:11,710 --> 00:00:12,930 幻灯片上 4 00:00:15,530 --> 00:00:15,885 5 00:00:15,885 --…...
测开新手：pytest+requests+allure自动化测试接入Jenkins学习
最近在这整理知识，发现在pytest的知识文档缺少系统性，这里整理一下，方便后续回忆。 在python中，大家比较熟悉的两个框架是unittest和pytest： Unittest是Python标准库中自带的单元测试框架，Unittest有时候…...
学习网络编程No.11【传输层协议之UDP】
引言： 北京时间：2023/11/20/9:17，昨天成功更文，上周实现了更文两篇，所以这周再接再厉。当然做题任在继续，而目前做题给我的感觉以套路和技巧偏多，还是那句话很多东西不经历你就是不懂ÿ…...
向爬虫而生---Redis 基石篇6 ＜拓展HyperLogLog＞
前言: 继续之前的 向爬虫而生---Redis 基石篇5 ＜拓展Zset＞-CSDN博客 一些比较基础的redis类型在初中级阶段用着没有毛病,但是到了大数据时代,慢慢一些更高级的场景,就需要把这几个类型搬出来了! 正文: 概念: 当我们需要对一个大型数据集进行去重计…...
JavaScript中的this
在实际应用中，了解 this 的行为是非常重要的，特别是在编写库或框架时，或者当你需要在回调函数中访问特定的上下文时，通常推荐使用箭头函数或者其他方法来确保 this 的正确指向。 在ES6中，this 的值取决于它是如何被调用…...
宝塔php站点设置伪静态规则 访问 a.com 时候跳转到 a.com/b.html
要在宝塔 PHP 站点中设置伪静态规则，实现访问a.com时跳转到a.com/b.html，可以按照以下步骤进行操作： 打开宝塔面板并登录到你的服务器管理界面。进入网站设置页面，找到你要设置伪静态规则的 PHP 站点。在站点设置中，找…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作，无需更改相机配置。但是，一…...
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
day52 ResNet18 CBAM
在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...
深度学习水论文：mamba＋图像增强
🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...