在vue2中使用饼状图

流殇꧂2024-03-02 23:41

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内容

html 复制代码 
		<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内容

html 复制代码 
		<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中添加新增和删除的功能

html 复制代码 
					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的完整写法

html 复制代码 
				watch:{
					list:{ 
						deep:true,//深度监视  
						handler(newValue){  
						localStorage.setItem("list",JSON.stringify(newValue)) 
						}  }  
				   }  ,

存储后前面的获取也需要修改，从本地获取并转成json格式

html 复制代码 
JSON.parse(localStorage.getItem("list"))

这样我们修改的后的数据就不会因为刷新浏览器而不存在了

5.使用饼状图

在钩子函数mounted渲染完成后添加echarts

html 复制代码 
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更新饼状图的方法

javascript 复制代码 
					a(){ 
						this.myChat.setOption(
						{
							series: [ {  
							data:  this.list.map(item=>({value:item.price,name:item.name})), 
								   } ]
						})
					}

完整代码如下

html 复制代码 
<!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>
相关推荐
paopaokaka_luck3 天前
基于springboot3+vue3的美妆商城平台（AI问答、协同过滤算法、支付宝沙盒支付、物流快递api、Echarts图形化分析）
java·前端·spring boot·学习·maven·echarts
paopaokaka_luck5 天前
基于springboot3+vue3的音乐推荐系统（协同过滤算法、Echarts图形化分析）
前端·echarts
做好一个小前端9 天前
ECharts 折线图大数据量性能优化参考
前端·性能优化·echarts
paopaokaka_luck9 天前
基于springboot3+vue3的云南本土影视文旅推荐平台（协同过滤算法、Echarts图形化分析）
前端·spring boot·学习·算法·echarts·mybatis
paopaokaka_luck9 天前
基于springboot3+vue3的企业考勤管理系统（部门树递归、Echarts图形化分析）
开发语言·spring boot·学习·echarts·mybatis·需求分析·代码规范
paopaokaka_luck11 天前
基于springboot3+vue3的乡村医生诊疗管理系统（AI助手、协同过滤算法、webSocket实时聊天、Echarts图形化分析）
前端·网络·人工智能·spring boot·websocket·网络协议·echarts
满栀58512 天前
原生JS + ECharts 多图表可视化实战：从业务实现到工程化优化
开发语言·javascript·echarts
paopaokaka_luck15 天前
基于springboot3+vue3的智能文库平台（AI智能搜索、AI智能汇总、实时在线状态展示、多格式文档预览与富文本编辑、Echarts图形化分析）
前端·网络·spring boot·网络协议·echarts
Highcharts.js17 天前
基于Highcharts开发的OHLC 股票K线图完全指南
javascript·信息可视化·echarts·数据可视化·highcharts·ohlc
脾气有点小暴17 天前
ECharts 伪 3D 柱状图完整注释 + 实现原理说明
前端·3d·信息可视化·vue·echarts
热门推荐
01GitHub 镜像站点02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新042026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？05Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费06VSCode+CodeX扩展，无法启动07历年考研数学一、数学二、数学三真题试卷及答案PDF08AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路092026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片10如何新建文件夹？ 电脑新建文件夹的4种方法