第十四章章节练习echarts饼图渲染

一、引言

二、完整代码

三、总结

一、引言

通过前面几个章节的学习，再结合日常项目中经常会使用到的echarts图，来完整以下功能需求，增强对知识点的巩固：

1. 基本渲染

2. 添加功能

3. 删除功能

4. 饼图渲染

运行效果图如下：

二、完整代码

代码中的后端接口为我本地机子部署的服务，大家可根据自身情况，在本地创建一个简单的SpringBoot或者传统的JavaWeb工程服务，涉及到简单的增删改查接口，字段主要有creator、name、price：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- CSS only --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/><style>.red {color: red!important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table > :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box  a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}@media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}</style></head><body><div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box"><!-- 添加资产 --><form class="my-form"><input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" /><input v-model="price" type="text" class="form-control" placeholder="消费价格" /><button @click="add" type="button" class="btn btn-primary">添加账单</button></form><table class="table table-hover"><thead><tr><th>编号</th><th>消费名称</th><th>消费价格</th><th>操作</th></tr></thead><tbody><tr v-for="(item, index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td><td><a @click="del(item.id)" href="javascript:;">删除</a></td></tr></tbody><tfoot><tr><td colspan="4">消费总计： {{ totalPrice.toFixed(2) }} </td></tr></tfoot></table></div><!-- 右侧图表 --><div class="echarts-box" id="main"></div></div></div><script src="echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** * 功能需求：* 1. 基本渲染*  （1）立刻发送请求获取数据 created*  （2）拿到数据，存到data的响应式数据中*  （3）结合数据，进行渲染 v-for*  （4）消费统计 => 计算属性* 2. 添加功能*   (1) 收集表单数据 v-model*   (2) 给添加按钮注册点击事件，发送添加请求*   (3) 需要重新渲染* 3. 删除功能*   (1) 注册点击事件 传入参数id*   (2) 根据id发送删除请求*   (3) 需要重新渲染* 4. 饼图渲染*   (1) 初始化饼图 echarts.init(dom) mounted钩子函数实现*   (2) 根据数据实时更新饼图 echarts.setOption({ ...})*/const app = new Vue({el: '#app',data: {list: [],name: '',price: ''},computed: {totalPrice () {return this.list.reduce((sum, item) => sum + item.price, 0)}},async created () {// const res = await axios.get('https://localhost:8080/bill', {//   params: {//   }// })// this.list = res.data.datathis.getList()},mounted () {this.myChart = echarts.init(document.querySelector('#main'))this.myChart.setOption({// 大标题title: {text: '消费账单列表',left: 'center'},// 提示框tooltip: {trigger: 'item'},// 图例legend: {orient: 'vertical',left: 'left'},series: [{name: '消费账单',// 饼图type: 'pie',// 半径大小radius: '50%',data: [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}) },methods: {async getList() {const res = await axios.get('https://localhost:8080/wzx/bill/list', {params: {}})this.list = res.data.data// 更新饼图this.myChart.setOption({series: [{data: this.list.map(item => ({value: item.price, name: item.name}))}]})},async add () {if (!this.name) {alert('请输入消费名称')return}if (typeof this.price !== 'number') {alert('请输入')}// 发送添加请求const res = await axios.post('https://localhost:8080/wzx/bill/save', {creator: '小黑',name: this.name,price: this.price})// 重新渲染一次this.getList()this.name = ''this.price = ''},async del (id) {// 根据id发送删除请求const res = await axios.delete('https://localhost:8080/wzx/bill/delete/${id}')// 重新渲染this.getList()}}})</script></body>
</html>