vue+elementui+echarts饼状图内部显示百分比
<!--饼状图--><div id="main" style="width: 400px;height: 350px;"></div>import echarts from 'echarts'export default {name: '',data () {...
·
<!--饼状图-->
<div id="main" style="width: 400px;height: 350px;"></div>
import echarts from 'echarts'
export default {
name: '',
data () {
return {
charts: '',
opinion:['执行总额','已经执行'],
type: 'pie',
opinionData:[
{value:400, name:'执行总额'},
{value:600, name:'已经执行'},
],
}
},
methods:{
drawPie(id){
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
color: ['#A4B6C9', '#4E7095'],/*饼状图的颜色*/
tooltip : {
trigger: 'item',
formatter: "{b}({d}%)",/*饼状图触碰之后显示的注释文字*/
},
legend: {
left: 'center',/*标签文字排成一行*/
y: 'bottom',/*在垂直方向上的底部*/
data:this.opinion,
},
series: [
{
type: 'pie', //饼状图
center: ['50%', '40%'], //显示位置
name:'',
type:'pie',
radius:['0%','60%'],/*空心圆的占比*/
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
borderWidth: 5,/*隔开的白色边界*/
borderColor: '#fff',/*border*/
// labelLine :{show:true}
},
},
avoidLabelOverlap: false,
label: {
normal: {
show:true,
position:'inner',
textStyle: {
fontWeight: 200,
fontSize: 20 //文字的字体大小
},
formatter: '{d}%',/*饼状图内显示百分比*/
// data:['40%','60%'],
},
emphasis: {
show: false,/*空心文字出现*/
}
},
labelLine: {
normal: {
show: false
}
},
data:this.opinionData
}
]
})
}
},
//调用
mounted(){
this.$nextTick(function() {
this.drawPie('main')
})
},
}
更多推荐
已为社区贡献4条内容
所有评论(0)