当前位置：首页 > news >正文

在vue2中使用饼状图

news 2026/2/9 7:04:10

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

编程日记 2024/3/3 1:20:05

面经（五）南京软通动力一面

注：已经有了接近一年的工作经验总体评价不完全是技术面，面试经过还行，但可能是期望岗位和对方需求不太一致，感觉不太好过面试经过 HR找你，发简历入库，然后商量面试时间，发腾讯会议链接腾…...

编程日记 2024/3/3 1:19:05

线段树模型及例题整理

线段树的应用范围非常广，可以处理很多与区间有关的题目。将区间抽象成一个节点，在这个节点中储存这个区间的一些值，那么如果看成节点的话，这就很像一棵满二叉树，所以我们可以用一维数组来储存节点。那么就要考虑父子节…...

编程日记 2024/3/3 1:18:03

揭秘Java性能调优的层次 | 综合多方向提升应用程序性能与系统高可用的关键（架构层次规划）

揭秘性能调优的层次 | 综合多方向提升应用程序性能与系统的高可用前言介绍调优层次调优 — 设计案例说明 - 操作轮询控制事件驱动调优 — 代码案例说明 - ArrayList和LinkedList性能对比案例说明 - 文件读写实现方式的性能对比调优 — JVMJVM架构分布JVM调优方向**JVM垃圾回…...

编程日记 2024/3/3 1:15:00

事件循环解析

浏览器的进程模型何为进程？ 程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。何为线程？ 有了进程后&…...

编程日记 2024/3/3 1:11:58

物联网技术助力智慧城市安全建设：构建全方位、智能化的安全防护体系

一、引言随着城市化进程的加速和信息技术的迅猛发展，智慧城市已成为现代城市发展的重要方向。在智慧城市建设中，安全是不可或缺的一环。物联网技术的快速发展为智慧城市安全建设提供了有力支持，通过构建全方位、智能化的安全防护体系&#…...

编程日记 2024/3/3 1:06:54

mac打不开xxx软件，因为apple 无法检查其是否包含恶意

1. 安全性与隐私下面的允许来源列表，有些版本中的‘任何来源’选项被隐藏了，有些从浏览器下载的软件需要勾选这个选项才能安装打开‘任何来源’选项 sudo spctl --master-disable 关闭‘任何来源’选项 sudo spctl --master-enable...

编程日记 2024/3/3 1:02:50

《深入浅出红黑树：一起动手实现自平衡的二叉搜索树》

一、分析 1. 红黑树的性质红黑树是一种自平衡的二叉搜索树，它具有以下五个性质： （1）节点是红色或黑色。 （2）根节点是黑色。 （3）所有叶子节点（NIL节点）是…...

编程日记 2024/3/3 1:00:48

C++——模版

前言：哈喽小伙伴们好久不见，这是2024年的第一篇博文，我们将继续C的学习，今天这篇文章，我们来习一下——模版。目录一.什么是模版二.模版分类 1.函数模版 2.类模板总结一.什么是模版说起模版，我们…...

编程日记 2024/3/3 0:59:47

《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 组播路由…...

编程日记 2024/3/3 0:58:47

备战蓝桥杯---动态规划的一些思想1

话不多说，直接看题： 目录 1.双线程DP 2.正难则反多组DP 3.换个方向思考： 1.双线程DP 可能有人会说直接贪心：先选第1条的最优路径，再选第2条最优路径。其实我们再选第1条时，我们怎么选会对第2条的路径…...

编程日记 2024/3/3 0:53:42

基于BERTopic模型的中文文本主题聚类及可视化

文章目录 BERTopic简介模型加载地址文本加载数据处理BERTopic模型构建模型结果展示主题可视化总结BERTopic简介 BERTopic论文地址：BERTopic: Neural topic modeling with a class-based TF-IDF procedure BERTopic是一种结合了预训练模型BERT和主题建模的强大工具。它允许我…...

编程日记 2024/3/3 0:49:37

MySQL：函数

提醒： 设定下面的语句是在数据库名为 db_book里执行的。创建user_info表注意：pwd为密码字段，这里使用了VARCHAR(128)类型，为了后面方便对比，开发项目里一般使用char(32)，SQL语句里使用MD5加密函数 USE db…...

编程日记 2024/3/3 0:46:34

C/C++内存管理及内存泄漏详解

目录 C/C内存分布 C语言中动态内存管理方式：malloc/calloc/realloc/free C内存管理方式 new/delete操作内置类型 new和delete操作自定义类型 operator new与operator delete函数 new和delete的实现原理内置类型自定义类型内存泄漏概念内存泄漏分类 ⭐…...

编程日记 2024/3/3 0:45:33

什么是系统工程（字幕）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 --…...

编程日记 2024/3/3 0:44:32

测开新手：pytest+requests+allure自动化测试接入Jenkins学习

最近在这整理知识，发现在pytest的知识文档缺少系统性，这里整理一下，方便后续回忆。在python中，大家比较熟悉的两个框架是unittest和pytest： Unittest是Python标准库中自带的单元测试框架，Unittest有时候…...

编程日记 2024/3/3 0:43:31

学习网络编程No.11【传输层协议之UDP】

引言： 北京时间：2023/11/20/9:17，昨天成功更文，上周实现了更文两篇，所以这周再接再厉。当然做题任在继续，而目前做题给我的感觉以套路和技巧偏多，还是那句话很多东西不经历你就是不懂&#xff…...

编程日记 2024/3/3 0:42:30

向爬虫而生---Redis 基石篇6 ＜拓展HyperLogLog＞

前言: 继续之前的向爬虫而生---Redis 基石篇5 ＜拓展Zset＞-CSDN博客一些比较基础的redis类型在初中级阶段用着没有毛病,但是到了大数据时代,慢慢一些更高级的场景,就需要把这几个类型搬出来了! 正文: 概念: 当我们需要对一个大型数据集进行去重计…...

编程日记 2024/3/3 0:36:22

JavaScript中的this

在实际应用中，了解 this 的行为是非常重要的，特别是在编写库或框架时，或者当你需要在回调函数中访问特定的上下文时，通常推荐使用箭头函数或者其他方法来确保 this 的正确指向。在ES6中，this 的值取决于它是如何被调用…...

编程日记 2024/3/3 0:35:21

宝塔php站点设置伪静态规则访问 a.com 时候跳转到 a.com/b.html

要在宝塔 PHP 站点中设置伪静态规则，实现访问a.com时跳转到a.com/b.html，可以按照以下步骤进行操作： 打开宝塔面板并登录到你的服务器管理界面。进入网站设置页面，找到你要设置伪静态规则的 PHP 站点。在站点设置中，找…...

编程日记 2024/3/3 0:33:18

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑：陈萍萍的公主一点人工一点智能未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/7 23:18:28

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...

编程新知 2025/9/21 0:49:02

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...

编程新知 2026/2/3 22:50:06

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。稳定性: 5 - 锁定这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/25 13:33:35

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2026/1/31 8:25:07