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

最新推荐文章于 2023-11-10 19:24:26 发布

原创

最新推荐文章于 2023-11-10 19:24:26 发布 · 7.8k 阅读

34 ·

CC 4.0 BY-SA版权

文章标签：

#echarts画饼图 #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