Vue+Echarts实现一个饼状图
1:在项目里面安装echarts
// 在项目中安装echarts 插件
cnpm install echarts --save
2:在需要用图表的地方引入
// 在文件中引入
import echarts from 'echarts'
// 如:创建VUE文件,index.vue,为echarts准备一个具备大小的容器dom
<template>
//
<div id="container" style="width: 800px;height: 500px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: '',
data () {
return {
charts: '',
opinion:['未通过','已通过'],
opinionData:[
{value:335, name:'未通过'},
{value:310, name:'已通过'},
]
}
},
methods:{
drawPie(){
this.charts = echarts.init(document.getElementById('container'))
this.charts.setOption({
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
x: 'left',
data:this.opinion
},
series: [
{
name:'通过率',
type:'pie',
radius:['35%','65%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '26',
fontWeight: 'blod'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:this.opinionData
}
]
})
}
},
//调用
mounted(){
this.$nextTick(function() {
this.drawPie()
})
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>