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