vue之根据axios获取后台数据用echarts画饼图_huanxianxianshi的博客

< 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.grade.submission_number-value4;
				var name1="AC";
				var name2="WA";
				var arr=[];
				arr.push({value:value4,name:name1});
				arr.push({value:value5,name:name2});
				mychart.setOption({
					series:[{
					name:' ',
					type:'pie',
					radius:'50%',
					data:arr,
					// itemStyle 设置饼状图扇形区域样式
              itemStyle: {
                // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(30, 144, 255，0.5)'
                }
              },
              // 设置值域的那指向线
              labelLine: {
                normal: {
                  show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                }
              },
              // 设置值域的标签
              label: {
                normal: {
                  position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                  // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                  // {a}指series.name  {b}指series.data的name
                  // {c}指series.data的value  {d}%指这一部分占总数的百分比
                  formatter:'{b}:{c}\n{d}%'
                }
              }

			}]
				})
			})
		}
}
}
		
< /script>
< style>< /style>
< template>
< div id="details" style="wi