echarts绘饼图

246 阅读1分钟

方法

drawLine(){
            let myChart = this.$echarts.init(document.getElementById("details"));
            this.$axios.get("../../static/date.json").then(res=>{
                console.log(res);
                this.grade = res.data.dateNum;
                var value1 = this.grade[0].numone;
                var value2 = this.grade[1].numtwo;
                var name1 = "威信用户";
                var name2 = "扣扣用户";
                var arr = [];
                arr.push({value:value1,name:name1});
                arr.push({value:value2,name:name2});
                arr.push({value:20,name:"微博用户"});
                arr.push({value:30,name:"腾讯用户"});
                
                myChart.setOption({
                    legend:{  //设置图标文字
                        orient:"vertical",  //默认水平horizontal
                        x:"right",      //x轴位置
                        y:"top",           //y轴位置
                        padding:[20,0,0,0],  //内间距
                        align:'right',  //图标文字换位置
                        icon:"rect",    //图标样式 还有:circle,roundRect,triangle,diamond,pin,arrow,none
                        textStyle:{   //文字颜色大小
                            fontSize:12,
                            color:"red"
                        },
                        itemWidth:10,  //图标宽
                        itemHeight:10,  //图标高
                        itemGap:30      //间距
                    },
                    tooltip:{
                        trigger:'item',
                        formatter:""
                    },
                    color:['green','red','blue','orange'],//饼图颜色
                    series:[
                        {
                            type:"pie",
                            radius:50,
                            center:["30%","50%"],
                            labelLine:{  //文字线的长短
                                normal:{
                                    length:10,
                                    length2:20
                                }
                            },
                            label:{
                                normal:{
                                    formatter:'{c|{c}%} \n {b|{b}} \n\n',
                                    // borderWidth:200,
                                    // borderRadius:402,
                                    padding:[0,-20],
                                    rich:{
                                        a:{
                                            color:"",
                                            fontSize:20,
                                            lineHeight:20
                                        },
                                        b:{
                                            color:"",
                                            fontSize:20,
                                            lineHeight:20
                                        },
                                        c:{
                                            color:"",
                                            fontSize:20,
                                            lineHeight:20
                                        },
                                        d:{
                                            color:"",
                                            fontSize:20,
                                            lineHeight:20
                                        }
                                    }
                                }
                            },
                            data:arr
                        }
                    ]
                  
                })
            })
        }