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

在vue2中使用饼状图

news 2026/2/9 10:16:42

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

如何在网页里填写 PDF 表格？

有时候，你可能希望用户能在你的网站上填写 PDF 表单。然而，这件事并不简单，因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件，但原生并不支持编辑或填写它们。更糟的是，如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

Java线上CPU飙高问题排查全指南

一、引言在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/8 2:27:29

React---day11

14.4 react-redux第三方库提供connect、thunk之类的函数以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

springboot整合VUE之在线教育管理系统简介

可以学习到的技能学会常用技术栈的使用独立开发项目学会前端的开发流程学会后端的开发流程学会数据库的设计学会前后端接口调用方式学会多模块之间的关联学会数据的处理适用人群在校学生，小白用户，想学习知识的有点基础，想要通过项…...

编程新知 2026/1/26 9:30:45

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

沙箱虚拟化技术虚拟机容器之间的关系详解

问题沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西，但是如果把三者放在一起，它们之间到底什么关系？又有什么联系呢？我不是很明白！！！ 就比如说： 沙箱&#…...

编程新知 2026/2/6 6:05:52

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后，命令 changeCase.commands 可预览转换效果 EmmyLua…...

编程新知 2026/1/21 17:44:45