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>
