echarts 实现环形进度图

效果如图：

typescript部分：

import {Component, OnInit} from "@angular/core";
import {EchartsDirective} from "../../libs/echarts/echarts.component";


@Component({
    selector: 'circle-loading',
    template: `
        <div echarts [eoption]="eoption" style="height: 300px;width: 300px;"></div>
    `,
    directives: [
        EchartsDirective
    ]
})

export class CircleLoadingComponent implements OnInit {

    eoption: any;
    name: string;
    value:number = 2;

    ngOnInit() {
        this.getInterval();
    }

    getInterval() {
        setInterval(() => this.generateData(), 1000);
    }

    generateData() {
        this.value = this.value < 100 ? this.value + 2 : 10;
        this.eoption = this.getOption();
    }

    getOption() {
        var option = {
            legend: {
                orient: 'vertical',
                x: 'left'
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    selectedMode: 'single',
                    radius: [0, '39%'],
                    hoverAnimation: false,
                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    animation: false,
                    data:[
                        {value:100, name:this.value + '%',
                            itemStyle: {
                                normal: {
                                    color: '#6a5acd'
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        color: '#f8f8f8',
                                        fontSize: 20
                                    }
                                }
                            }
                        }
                    ]
                },
                {

                    type:'pie',
                    radius: ['40%', '43%'],
                    itemStyle: {
                        normal: {
                            color: '#6a5acd'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    hoverAnimation: false,
                    animationEasing: 'cubicOut',
                    data:[
                        {value:this.value,
                            itemStyle: {
                                emphasis: {
                                    color: '#6a5acd'
                                }
                            }
                        },
                        {value:100 - this.value,
                            itemStyle: {
                                normal: {
                                    color: '#d3d3d3'
                                }
                            }
                        },
                    ]
                }
            ]
        };
        return option;
    }


}

效果如图：

 

转载于:https://my.oschina.net/u/2499632/blog/745576