vue之根据axios获取后台数据用echarts画饼图

本文介绍如何在Vue项目中利用axios从后台获取数据,并结合echarts在updated()生命周期钩子中动态渲染饼图,解决了mounted()中无法正确显示的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

< template>
< div id="details" style="width: 500px;height: 289px; box-sizing:border-box; line-height: 289px;">< /div>
< /template>
< script>
import axios from 'axios'
	export default{
		name:"problem1",
		data(){
			return{
         grade:[],
			}
		},
		updated(){
			this.drawLine();
		},
		methods:{ 
drawLine(){
			var mychart=this.$echarts.init(document.getElementById('details'));	
			mychart.setOption({
				tooltip:{},
				legend:{
					 // orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平) ¦ 'vertical'(垂直)
					orient:'horizontal',
					itemWidth:24,// 设置图例图形的宽
					itemHeight:18,// 设置图例图形的高
					textStyle:{
						color:'#666'// 图例文字颜色
					},
					 backgroundColor: '#eee',  // 设置整个图例区域背景颜色
					 data:['AC','WA'] 
				},
				series:[]
			});


			axios.get('https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe18/blog/echarts') .then((res)=>{
				this.grade=res.data.data.results[0];
				var value4=this.grade.accepted_number;
				var value5=this.gr
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值