怎么在vue中使用echarts制作一个圆环图
这篇文章给大家介绍怎么在vue中使用echarts制作一个圆环图，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
创新互联公司成立于2013年，先为巴马等服务建站，巴马等地企业，进行企业商务咨询服务。为巴马企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
代码如下所示：
export default {
//从父组件中接收到的数据
props:{
chartT:{
type:Object,
required:true
}
},
data () {
return {
charts: '',
totalIncome:'',
opinionData: [
{value: Math.abs(this.chartT.imp_rate)},//取绝对值
{value: 100}
]
}
},
methods: {
drawPie (id) {
this.charts = this.$echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
trigger: 'item',
formatter: '{a}
{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')
})
},
}
父组件传值给子组件
