< 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
vue之根据axios获取后台数据用echarts画饼图
最新推荐文章于 2023-11-10 19:24:26 发布