vue中使用echarts制作圆环图的实例代码
发布时间:2020-12-17 02:15:56 所属栏目:百科 来源:网络整理
导读:vue使用echarts制作圆环图,代码如下所示: 父组件传值给子组件 总结 以上所述是小编给大家介绍的vue中使用echarts制作圆环图的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
vue使用echarts制作圆环图,代码如下所示:
{b}:{c} ({d}%)'
},legend: {
orient: 'vertical',x: 'left',data: this.opinion
},color:['#2872ef','#d6d6d6','#fc6e51'],series: [
{
name: '访问来源',type: 'pie',radius: ['90%','65%'],avoidLabelOverlap: false,label: {
normal: {
show: false,position: 'center'
},emphasis: {
show: true,testStyle: {
fontSize: '30',fontWeight: 'bold'
}
}
},//根据数值判断颜色
// itemStyle:{
// normal:{
// color:function(params){
// console.log(params)
// console.log(params.dataIndex)
// console.log(params.data.value)
// console.log(params.value)
// if(params.value > 0){
// return "#2872ef";
// }else if(params.value[0] < 0 ){
// return "#fc6e51";
// }
// return "#d6d6d6";
// }
// }
// },labelLine: {
normal: {
show: false
}
},data: this.opinionData
}
]
})
}
},mounted () {
this.$nextTick(function () {
this.drawPie('main')
})
},}
父组件传值给子组件 相关内容
|