好资源导航 » 文章资讯 » vue中使用echarts制作圆环图的实例代码

vue中使用echarts制作圆环图的实例代码

2023-09-09 18:31:04 70

vue使用echarts制作圆环图，代码如下所示：

exportdefault{ //从父组件中接收到的数据 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"; //}elseif(params.value[0]<0){ //return"#fc6e51"; //} //return"#d6d6d6"; //} //} //}, labelLine:{ normal:{ show:false } }, data:this.opinionData } ] }) } }, mounted(){ this.$nextTick(function(){ this.drawPie('main') }) }, }

父组件传值给子组件



importaxiosfrom'axios'
importTittlefrom'./applicationDetail/appTittle'
exportdefault{
data(){
return{
chart_tit:{}
}
}
}

总结

以上所述是小编给大家介绍的vue中使用echarts制作圆环图的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

vue中使用echarts制作圆环图的实例代码

热门推荐

随机推荐