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

在vue2中使用饼状图

news 2026/4/12 1:47:36

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

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

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

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

线段树模型及例题整理

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

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

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

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

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

事件循环解析

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

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

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

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

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

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

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

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

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

一、分析 1. 红黑树的性质 红黑树是一种自平衡的二叉搜索树&#xff0c;它具有以下五个性质&#xff1a; &#xff08;1&#xff09;节点是红色或黑色。 &#xff08;2&#xff09;根节点是黑色。 &#xff08;3&#xff09;所有叶子节点&#xff08;NIL节点&#xff09;是…...

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

C++——模版

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

编程日记 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

话不多说&#xff0c;直接看题&#xff1a; 目录 1.双线程DP 2.正难则反多组DP 3.换个方向思考&#xff1a; 1.双线程DP 可能有人会说直接贪心&#xff1a;先选第1条的最优路径&#xff0c;再选第2条最优路径。 其实我们再选第1条时&#xff0c;我们怎么选会对第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：函数

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

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

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

目录 C/C内存分布 C语言中动态内存管理方式&#xff1a;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学习

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

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

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

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

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

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

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

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

JavaScript中的this

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

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

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

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

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

大功率双路直流电机驱动板设计资料集，含原理图、PCB、测试源码及器件选型分析，光耦隔离驱动，稳...

大功率双路直流电机驱动板的设计源文件&#xff0c;包括原理图、PCB、原理图与PCB器件库、BOM清单、stm32测试源 &#xff08;的是设计资料&#xff0c;的是资料&#xff0c;不是实际的产品哈&#xff09;&#xff0c;另外可对该图的设计原理&#xff0c;器件参数选型进行在线 …...

编程新知 2026/4/12 0:19:38

数字孪生与工业大脑：SOP+VisuCAD 的协同中枢

数字孪生是物理实体的数字化镜像&#xff0c;通过实时数据同步、动态仿真与虚拟映射&#xff0c;实现物理世界与数字世界的双向映射与闭环优化。工业大脑是工业智能的决策中枢&#xff0c;整合数据、模型、知识与算力&#xff0c;完成全局分析、智能决策与协同调度。在 JBoltAI…...

编程新知 2026/4/11 23:14:00

Python 函数进阶：参数、装饰器、匿名函数全精讲

阅读指南&#xff1a;本文专为 Python 初中级工程师打造&#xff0c;从参数底层规则到装饰器高阶实战&#xff0c;再到 lambda 高效场景&#xff0c;全程代码可直接复制运行&#xff0c;覆盖 90% 面试高频考点与工程最佳实践&#xff0c;读完即可独立封装通用装饰器、写出优雅高…...

编程新知 2026/4/11 21:52:17

崩坏3扫码登录神器：一键秒登全渠道服桌面端解决方案

崩坏3扫码登录神器&#xff1a;一键秒登全渠道服桌面端解决方案 【免费下载链接】bh3_login_simulation-memories 轻巧的崩坏3渠道服桌面端扫码登陆解决方案 项目地址: https://gitcode.com/gh_mirrors/bh/bh3_login_simulation-memories 崩坏3扫码登录模拟器是一款专为…...

编程新知 2026/4/11 19:56:10

Build Your Own Mint项目架构分析：理解Plaid、Google Sheets和CircleCI的完美结合

Build Your Own Mint项目架构分析&#xff1a;理解Plaid、Google Sheets和CircleCI的完美结合 【免费下载链接】build-your-own-mint Build your own personal finance analytics using Plaid, Google Sheets and CircleCI. 项目地址: https://gitcode.com/gh_mirrors/bu/bui…...

编程新知 2026/4/11 19:46:01

收藏！行业寒冬下，程序员薪资翻倍的秘密的是大模型（小白必看）

当下职场&#xff0c;程序员圈最热议的话题莫过于“行业寒冬”——降薪、裁员、优化成为常态&#xff0c;不少传统开发岗缩招严重&#xff0c;甚至有多年经验的工程师都面临失业危机…… 但诡异的是&#xff0c;另一边却有一批程序员逆势突围&#xff1a;薪资翻倍、Offer拿到手…...

编程新知 2026/4/11 18:44:46

2026年AIGC降重网站推荐，免费论文查重/Writepass/万方查重/AIGC降重，AIGC降重网站哪个好

在当今学术和创作领域&#xff0c;原创性和效率是至关重要的因素。随着AIGC&#xff08;人工智能生成内容&#xff09;技术的快速发展&#xff0c;抄袭和重复内容的问题日益凸显。AIGC降重技术应运而生&#xff0c;它利用先进的算法和大数据资源&#xff0c;能够精准识别文本中…...

编程新知 2026/4/11 17:34:04

Agenda嵌入式调度库：抗溢出、协作式Arduino任务管理方案

1. Agenda调度库概述Agenda是一个专为Arduino平台设计的轻量级、非中断驱动型任务调度库&#xff0c;其核心目标是提供一种抗溢出&#xff08;overflow-proof&#xff09;、高可靠性且资源可配置的时间管理方案。该库由Giovanni Blu Mitolo于2013年开发&#xff0c;最初服务于高…...

编程新知 2026/4/11 17:30:03

【计算机视觉入门精讲】第一站：图像处理与视觉基础

1. 图像的本质&#xff1a;从数学函数到像素矩阵 第一次接触计算机视觉时&#xff0c;最让我震撼的发现是&#xff1a;原来照片就是个数学函数。想象你面前有张黑白老照片&#xff0c;每个位置(x,y)的颜色深浅&#xff0c;其实就是一个函数值f(x,y)。这个函数把二维坐标映射到亮…...

编程新知 2026/4/11 16:26:14

3分钟掌握Markdown浏览器插件：让技术文档阅读变得简单高效

3分钟掌握Markdown浏览器插件&#xff1a;让技术文档阅读变得简单高效 【免费下载链接】markdown-viewer Markdown Viewer / Browser Extension 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer 还在为浏览器中打开Markdown文件显示原始代码而烦恼吗&…...

编程新知 2026/4/11 16:14:09