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

    1. 		<div id="app">
    2. 			<input type="text" style="width: 100px;" placeholder="消费名称" v-model.trim="name">
    3. 			<input type="text"style="width: 100px;" placeholder="消费价格" v-model.number="price">
    4. 			<button @click="add(name,price)" >添加账单button><br>
    5. 			<table border="1px solid red" style="text-align: center;width: 300px;">
    6. 				<thead>
    7. 					<tr>
    8. 						<td>编号td>
    9. 						<td>消费名称td>
    10. 						<td>消费价格td>
    11. 						<td>操作td>
    12. 					tr>
    13. 				thead>
    14. 				
    15. 				
    16. 				<tbody>
    17. 					<tr v-for="(item,index) in list" v-on:key="item.id">
    18. 						<td>{{index+1}}td>
    19. 						<td>{{item.name}}td>
    20. 						<td>{{item.price}}td>
    21. 						<td> <p @click="del(item.id)">删除p>td>
    22. 					tr>
    23. 				tbody>
    24. 				
    25. 			table>
    26. 			
    27. 			
    28. 			
    29. 			<div style="width: 500px;height: 300px;border:2px solid red;" class="main">
    30. 			 
    31. 			div>
    32. 			
    33. 		div>

    2.2补充基本的script内容

    1. 		<script>
    2. 			const l =[{id:1,name:'小黑',price:10},]
    3. 			
    4. 			const app =new Vue({
    5. 				el:"#app",
    6. 				data:{
    7. 					name:'',
    8. 					price:'',
    9. 					list: l,
    10. 				},
    11. 				methods:{},
    12. 				watch:{},
    13. 				mounted(){}
    14. 			})
    15. 			
    16. 		script>

       到现在展示的效果如下

    3.在methods中添加新增和删除的功能

    1. 					add(a,b){
    2. 					  this.list.unshift({id:+new Date(),name:a,price:b})
    3. 					},
    4. 					del(a){ 
    5. 					  this.list=	this.list.filter(b=>b.id!==a) 
    6. 					},

    这样我们的添加和删除的功能就可以实现了

    4.将修改后的内存持久化存储

      因为我们要对多个目标进行监听，所以需要使用watch的完整写法

    1. 				watch:{
    2. 					list:{ 
    3. 						deep:true,//深度监视  
    4. 						handler(newValue){  
    5. 						localStorage.setItem("list",JSON.stringify(newValue)) 
    6. 						}  }  
    7. 				   }  ,

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

    JSON.parse(localStorage.getItem("list"))

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

    5.使用饼状图

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

    1. this.myChat=	echarts.init(document.querySelector('.main'))
    2. 				this.myChat.setOption({ 
    3.                    title: { 
    4.                      text: '小黑记事本', 
    5.                      subtext: 'Fake Data',  // 小标题 
    6.                      left: 'center' ,
    7.                    }, 
    8.                    tooltip: { 
    9.                      trigger: 'item' //提示框
    10.                    }, 
    11.                    legend: { //图例
    12.                      orient: 'vertical', //垂直
    13.                      left: 'left' 
    14.                    }, 
    15.                    series: [ 
    16.                      { 
    17.                        name: '消费账单', 
    18.                        type: 'pie', 
    19.                        radius: '60%', 
    20. 					   data:  this.list.map(item=>({value:item.price,name:item.name})), 
    21.                        emphasis: { 
    22.                          itemStyle: { 
    23.                            shadowBlur: 10, 
    24.                            shadowOffsetX: 0, 
    25.                            shadowColor: 'rgba(0, 0, 0, 0.5)' 
    26.                          } 
    27.                        } 
    28.                      } 
    29.                    ] 
    30.                   }
    31. 				)

    这样我们就可以清晰的看到各项数据的占比，但是这是我们在渲染完成后才会刷新，所以需要我们重新定义一个方法在每次添加和删除之后进行调用来实时更新饼状图

    5.1更新饼状图的方法

    1. 					a(){ 
    2. 						this.myChat.setOption(
    3. 						{
    4. 							series: [ {  
    5. 							data:  this.list.map(item=>({value:item.price,name:item.name})), 
    6. 								   } ]
    7. 						})
    8. 					}

     

     

     完整代码如下

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script> 
    7. 		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script> 
    8. 	   <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js">script> 
    9. 	head>
    10. 	<body>
    11. 		
    12. 		<div id="app">
    13. 			<input type="text" style="width: 100px;" placeholder="消费名称" v-model.trim="name">
    14. 			<input type="text"style="width: 100px;" placeholder="消费价格" v-model.number="price">
    15. 			<button @click="add(name,price)" >添加账单button><br>
    16. 			<table border="1px solid red" style="text-align: center;width: 300px;">
    17. 				<thead>
    18. 					<tr>
    19. 						<td>编号td>
    20. 						<td>消费名称td>
    21. 						<td>消费价格td>
    22. 						<td>操作td>
    23. 					tr>
    24. 				thead>
    25. 				
    26. 				
    27. 				<tbody>
    28. 					<tr v-for="(item,index) in list" v-on:key="item.id">
    29. 						<td>{{index+1}}td>
    30. 						<td>{{item.name}}td>
    31. 						<td>{{item.price}}td>
    32. 						<td> <p @click="del(item.id)">删除p>td>
    33. 					tr>
    34. 				tbody>
    35. 				
    36. 			table>
    37. 			
    38. 			
    39. 			
    40. 			<div style="width: 500px;height: 300px;border:2px solid red;" class="main">
    41. 			 
    42. 			div>
    43. 			
    44. 		div>
    45. 		
    46. 		
    47. 		<script>
    48. 			const msg =  [
    49. 					{id:1,name:"手表",price:299.00},
    50. 					{id:2,name:"大衣",price:599.00},
    51. 					{id:3,name:"球鞋",price:299.00},
    52. 					{id:4,name:"鸭舌帽",price:99.00}
    53. 			]
    54. 			var list1 =  JSON.parse(localStorage.getItem("list"))
    55. 			const app =new Vue({
    56. 				el:"#app",
    57. 				data:{
    58. 					name:"",
    59. 					price:"",
    60. 					list:list1||msg
    61. 				},
    62. 				methods:{
    63. 					add(a,b){
    64. 						console.log(a)
    65. 						if(a==null || a==""){alter("请您添加消费名称")} 
    66. 						this.list.unshift({id:+new Date(),name:a,price:b})
    67. 						this.a()
    68. 					},
    69. 					del(a){ 
    70. 					this.list=	this.list.filter(b=>b.id!==a) 
    71. 					this.a()
    72. 					}, 
    73. 					a(){ 
    74. 						this.myChat.setOption(
    75. 						{
    76. 							series: [ {  
    77. 							data:  this.list.map(item=>({value:item.price,name:item.name})), 
    78. 								   } ]
    79. 						})
    80. 					}
    81. 				},
    82. 				watch:{
    83. 					list:{ 
    84. 						deep:true,//深度监视  
    85. 						handler(newValue){  
    86. 						localStorage.setItem("list",JSON.stringify(newValue)) 
    87. 						}  }  
    88. 				   }  , 
    89. 				mounted(){//渲染后
    90. 				this.myChat=	echarts.init(document.querySelector('.main'))
    91. 				this.myChat.setOption({ 
    92.                    title: { 
    93.                      text: '小黑记事本', 
    94.                      subtext: 'Fake Data',  // 小标题 
    95.                      left: 'center' ,
    96.                    }, 
    97.                    tooltip: { 
    98.                      trigger: 'item' //提示框
    99.                    }, 
    100.                    legend: { //图例
    101.                      orient: 'vertical', //垂直
    102.                      left: 'left' 
    103.                    }, 
    104.                    series: [ 
    105.                      { 
    106.                        name: '消费账单', 
    107.                        type: 'pie', 
    108.                        radius: '60%', 
    109. 					   data:  this.list.map(item=>({value:item.price,name:item.name})), 
    110.                        emphasis: { 
    111.                          itemStyle: { 
    112.                            shadowBlur: 10, 
    113.                            shadowOffsetX: 0, 
    114.                            shadowColor: 'rgba(0, 0, 0, 0.5)' 
    115.                          } 
    116.                        } 
    117.                      } 
    118.                    ] 
    119.                   }
    120. 				)
    121. 				}, 
    122. 			})
    123. 			
    124. 		script>
    125. 		
    126. 		
    127. 		
    128. 		
    129. 		
    130. 	body>
    131. html>

  • 相关阅读:
    以技术面试官的经验分享毕业生及三年以下的程序员通过面试的技巧
    ParameterizedType类型设置默认值
    ubuntu20.04下安装nc
    【MySQL】数据类型——MySQL的数据类型分类、数值类型、小数类型、字符串类型
    tomcat常用配置详解和优化方法
    2023年7月工作经历三
    CentOS 7 上划分vlan复用接口配置多个ip地址——筑梦之路
    go设计模式——适配器模式 2
    《ClickHouse原理解析与应用实践》读书笔记（2）
    Matlab|基于多目标粒子群算法的微电网优化调度（多约束多目标智能算法模板）
  • 原文地址：https://blog.csdn.net/weixin_68926017/article/details/136407173