vue饼图组件_vue写一个图表组件(1)----饼图

话不多说，先上最终效果图：

上面的饼图的实现，使用的插件为百度echarts，该插件的功能可是非常的强大呢，下面便来说说怎么实现的吧

import echarts from 'echarts'

export default {

data() {

return {

dataList:[

{value:1, name:'0-20分'},

{value:3, name:'21-50分'},

{value:24, name:'51-70分'},

{value:7, name:'71-80分'},

{value:3, name:'81-100分'},

]

}

},

methods: {

// 图表初始化数据

initChart(){

let myChart = echarts.init(this.$refs.myEchart);

myChart.setOption({

tooltip: {

trigger:'item',

formatter: "{a}
{b}: {c}
({d}%)"

},

series : [

{

name:'学生作业提交率',

type: 'pie',

radius : '80%',

center: ['52%', '53%'],

avoidLabelOverlap: false,

data: this.dataList,

itemStyle: {

emphasis: {

shadowBlur: 5,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.3)'

}

}

}

]

})

}

},

mounted () {

let obj = this.$refs.myEchart;

if(obj){

this.initChart();

}

}

}

data中的数据使用放在props中便可以实现父子传值啦，如果需要宽高自定义也可以将width和height放在props中，如果里面的配置不清楚含义的话，可以去官网查找API哦。