在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>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue开发实例(七)Axios的安装与使用

说明&#xff1a; 如果只是在前端&#xff0c;axios常常需要结合mockjs使用&#xff0c;如果是前后端分离&#xff0c;就需要调用对应的接口&#xff0c;获取参数&#xff0c;传递参数&#xff1b;由于此文章只涉及前端&#xff0c;所以我们需要结合mockjs使用&#xff1b;由于…

智慧公厕:让城市更智慧、更环保

在现代社会&#xff0c;智慧公厕作为城市管理的重要一环&#xff0c;是智慧城市的重要组成部分&#xff0c;其建设的价值十出突出&#xff0c;是公共厕所信息化升级改造的核心方案。如智慧公厕源头厂家广州中期科技有限公司&#xff0c;所自主研发的智慧公厕整体解决方案&#…

docker-mysql:5.7安装

1、下载mysql:5.7镜像 [rootlocalhost ~]# docker search mysql (某个XXX镜像名字) [rootlocalhost ~]# docker pull mysql:5.7 按装之前查看一下是否按装过mysql。如果安装过会占用3306端口。 [rootlocalhost ~]# ps -ef | grep mysql 2、安装 # -d&#xff1a;后台运行 #…

VL817-Q7 USB3.0 HUB芯片 适用于扩展坞 工控机 显示器

VL817-Q7 USB3.1 GEN1 HUB芯片 VL817-Q7 USB3.1 GEN1 HUB芯片 VIA Lab的VL817是一款现代USB 3.1 Gen 1集线器控制器&#xff0c;具有优化的成本结构和完全符合USB标准3.1 Gen 1规范&#xff0c;包括ecn和2017年1月的合规性测试更新。VL817提供双端口和双端口4端口配置&…

Go 互斥锁的实现原理?

Go sync包提供了两种锁类型&#xff1a;互斥锁sync.Mutex 和 读写互斥锁sync.RWMutex&#xff0c;都属于悲观锁。 概念 Mutex是互斥锁&#xff0c;当一个 goroutine 获得了锁后&#xff0c;其他 goroutine 不能获取锁&#xff08;只能存在一个写者或读者&#xff0c;不能同时…

数据抽取平台pydatax介绍--实现和项目使用

数据抽取平台pydatax实现过程中&#xff0c;有2个关键点&#xff1a; 1、是否能在python3中调用执行datax任务&#xff0c;自己测试了一下可以&#xff0c;代码如下&#xff1a; 这个str1就是配置的shell文件 try:result os.popen(str1).read() except Exception as …

Vue2:用node+express部署Vue项目

一、编译项目 命令 npm run build执行命令后&#xff0c;我们会在项目文件夹中看到如下生成的文件 二、部署Vue项目 接上一篇&#xff0c;nodeexpress编写轻量级服务 1、在demo中创建static文件夹 2、将dist目录中的文件放入static中 3、修改server.js文件 关键配置&…

【EAI 026】RoboGen: 通过自动数据生成管线实现机器人技能学习

Paper Card 论文标题&#xff1a;RoboGen: Towards Unleashing Infinite Data for Automated Robot Learning via Generative Simulation 论文作者&#xff1a;Yufei Wang, Zhou Xian, Feng Chen, Tsun-Hsuan Wang, Yian Wang, Zackory Erickson, David Held, Chuang Gan 作者单…

2.26 Qt day4+5 纯净窗口移动+绘画事件+Qt实现TCP连接服务+Qt实现连接数据库

思维导图 Qt实现TCP连接 服务器端&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTcpServer>//服务器端类 #include<QTcpSocket>//客户端类 #include<QMessageBox>//消息对话框类 #include<QList>//链…

笔记72:关于IMU(惯性测量单元)传感器的作用【不涉及公式推导】

一、IMU传感器是什么&#xff1a; 惯性测量单元IMU&#xff08;Inertial Measurement Unit&#xff09;是一种使用【加速度计】和【陀螺仪】来测量【物体三轴姿态角&#xff08;空间姿态&#xff09;】的装置&#xff1b;IMU在坐标系的每个坐标轴上&#xff0c;均安装有1个陀螺…

分销小程序的常见功能

分销小程序是一种非常有前景和潜力的产品形式&#xff0c;可以帮助企业快速拓展销售渠道&#xff0c;增加销售额。下面我将介绍分销小程序的常见功能。 1. **分销商注册与管理**&#xff1a;支持任何用户自动成为分销商&#xff0c;也可以支持有会员等级&#xff08;或付费或审…

计算机网络:IP

引言&#xff1a; IP协议是互联网协议族中的核心协议之一&#xff0c;负责为数据包在网络中传输提供路由寻址。它定义了数据包如何在互联网上从源地址传输到目的地址的规则和流程。IP协议使得各种不同类型的网络设备能够相互通信&#xff0c;实现了全球范围内的信息交换。 目录…

第三百七十八回

文章目录 1. 概念介绍2. 实现方法2.1 maskFilter2.2 shader 3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"两种阴影效果"相关的内容&#xff0c;本章回中将介绍如何绘制阴影效果.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概…

StarRocks实战——携程酒店实时数仓

目录 一、实时数仓 二、实时数仓架构介绍 2.1 Lambda架构 2.2 Kappa架构 三、携程酒店实时数仓架构 3.1 架构选型 3.2 实时计算引擎选型 3.3 OLAP选型 四、携程酒店实时订单 4.1 数据源 4.2 ETL数据处理 4.3 应用效果 4.4 总结 原文大佬的这篇实时数仓建设案例有借…

nebula容器方式安装:docker 安装nebula到windows

感谢阅读 基础环境安装安装docker下载nebula 安装数据库命令行安装查询network nebula-docker-compose_nebula-net并初始化查询安装初始使用root&#xff08;God用户类似LINUX的root&#xff09; 关闭服务 安装UI 基础环境安装 安装docker 点我下载docker 下载nebula 数据…

Sentinel实战(待完善)

目录 服务雪崩 什么是服务雪崩 服务不可用原因 解决方案 技术选型对比 Sentinel 介绍 优点 核心概念 资源 规则 代码实战 API实现 SentinelResource注解实现 Sentinel控制台 启动控制台服务 java应用接入控制台 微服务接入Sentinel 服务雪崩 什么是服务雪崩…

1、docker入门

文章目录 1、tocker简介2、tocker的安装&环境配置2、配置阿里云镜像3、基本命令1、镜像命令2、docker基本命令3、镜像基本命令4、Docker 容器常用命令 1、tocker简介 新一代的虚拟化技术 2、tocker的安装&环境配置 uname -r1、首先查看liunx的内核 yum update -y2、更…

uniapp npx update-browserslist-db@lates 问题解决

在uniapp运行项目时&#xff0c;会有这种报错&#xff0c;其实这是表明browserslistlatest版本低了&#xff0c;在催你升级版本&#xff0c;browserslistlatest是用来支持解析css用的&#xff0c;当然&#xff0c;你也可以直接忽略这个报错提示&#xff0c;也可以正常运行项目。…

【AIGC】OpenAI推出王炸级模型sora,颠覆AI视频行业(2024)

对于OpenAI推出的Sora模型&#xff0c;我们可以进一步探讨其可能的技术细节、潜在应用以及对AI视频行业的影响。 点击以下任一云产品链接&#xff0c;跳转后登录&#xff0c;自动享有所有云产品优惠权益&#xff1a; 经过笔者亲测&#xff0c;强烈推荐腾讯云轻量应用服务器作…

day05_用户管理minIO角色分配(页面制作,查询用户,添加用户,修改用户,删除用户,用户头像,查询所有角色,保存角色数据)

文章目录 1 用户管理1.1 页面制作1.2 查询用户1.2.1 需求说明1.2.2 后端接口需求分析SysUserSysUserDtoSysUserControllerSysUserServiceSysUserMapperSysUserMapper.xml 1.2.3 前端对接实现思路sysUser.jssysRole.vue 1.3 添加用户1.3.1 需求说明1.3.2 页面制作1.3.3 后端接口…