田野里，高粱像喝醉了酒，频频点头；玉米正在变黄了的衣服里睡大觉；大豆也小坡了肚皮，蹦了出来；小白菜像列队的士兵整齐地排列在在菜地里。农民正忙忙碌碌地收获着一年的成果，田野里不时传出阵阵欢笑声。啊，秋天的景色真美啊！
vue使用echarts制作圆环图，代码如下所示：
<div id="main"></div>
<script type="text/ecmascript-6">
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}<br/>{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')
})
},
}
</script>
父组件传值给子组件
<template>
<div class="index-wrapper">
<tittle :chartT="chart_tit"></tittle>
</div>
</template>
<script type="text/ecmascript-6">
import axios from 'axios'
import Tittle from './applicationDetail/appTittle'
export default {
data(){
return{
chart_tit:{}
}
}
}
</script>
总结
以上所述是小编给大家介绍的vue中使用echarts制作圆环图的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
以上就是vue中如何使用echarts制作圆环图的实例代码。美好是一种执念，我坚持，你随意。更多关于vue中如何使用echarts制作圆环图的实例代码请关注haodaima.com其它相关文章！
