|
这篇文章主要介绍了vue中使用echarts制作圆环图的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
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制作圆环图的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ | 
发表于 2018-7-27 11:47:51
