怎么在vue中使用echarts制作一个圆环图-创新互联
这篇文章给大家介绍怎么在vue中使用echarts制作一个圆环图，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
在做网站、
成都网站建设中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手，突出企业的产品/服务/品牌，帮助企业锁定精准用户，提高在线咨询和转化，使成都网站营销成为有效果、有回报的无锡营销推广。创新互联专业成都网站建设十年了，客户满意度97.8%，欢迎成都创新互联客户联系。
代码如下所示：
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')
})
},
}
父组件传值给子组件
import axios from 'axios'
import Tittle from './applicationDetail/appTittle'
export default {
data(){
return{
chart_tit:{}
}
}
}
关于怎么在vue中使用echarts制作一个圆环图就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
文章名称：怎么在vue中使用echarts制作一个圆环图-创新互联
链接地址：http://njwzjz.com/article/djshgc.html
